canvas笔记一---概述

一、Canvas概述

1、canvas简述
Canvas是一种轻量级的画布（实际上就是H5的标签）

使用canvas进行JavaScript编程无需增加额外插件，性能高

当前浏览器版本不支持，请升级浏览器

canvas只有两个标签属性，width、height，代表画布宽度和高度

注意：canvas的width和height不要用css的样式来设置，如果用css的样式来设置，画布会失真、变形

标签的文字是用来提示低版本浏览器的，高版本浏览器看不到

我们绘制canvas图是在JavaScript中绘制的

基本使用

// 得到canvas画布
let canvas = document.getElementById(“mycanvas”)
// 通过画布对象得到上下文，上下文分为2d和3d
// 所有的图像绘制都是通过ctx的属性或方法来绘制的，和canvas标签无关了
let ctx = canvas.getContext(“2d”)
// 设置颜色 注：先设置颜色后绘制
ctx.filStyle = “green”
// 绘制矩形
ctx.filRect(100,100,200,50) // 100，100是以左上角为原点x、y的坐标 200、50是矩形宽高

canvas默认被画布栅格覆盖， 通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））

通过上面代码我们发现canvas本质上就是利用代码在浏览器页面上进行画画

2、Canvas的像素化
我们使用canvas绘制了一个图形，一旦绘制成功，canvas就像素化了它们，canvas没有能力从画布上再次得到这个图形，也就是我们没有能力去修改已经在画布上的内容，这是canvas比较轻量得原因，Flash重得原因之一就是它可以通过API获得已经在画布上的内容然后再次绘制

3、Canvas动画思想
如果我们想让canvas图形移动，必须按照清屏-更新-渲染的逻辑编程，总之就是重新再画一次

动画的生成就是相关静态画面的连续播放，我们把每一次绘制的静态画面叫做一帧，定时器时间的间隔表示的是帧的间隔

// 得到canvas画布
let canvas = document.getElementById(“mycanvas”)
// 通过画布对象得到上下文，上下文分为2d和3d
// 所有的图像绘制都是通过ctx的属性或方法来绘制的，和canvas标签无关了
let ctx = canvas.getContext(“2d”)
// 设置颜色 注：先设置颜色后绘制
ctx.filStyle = “green”
// 设置信号量
let left = 100
// 动画过程
setInterval(function(){
// 清除画布，从0，0位置开始清楚，500，500代表清除的宽度和高度
ctx.clearRect(0,0,500,500)
// 更新信号量
left++
// 重新绘制
ctx.fillRect(left,100,100,100)
},10)

4、面向对象思维实现canvas动画
在canvas动画重，我们都是用面向对象来进行编程，因为我们可以使用面向对象的方式来维持canvas需要的属性和状态

let canvas = document.getElementById("mycanvas")
// 通过画布对象得到上下文，上下文分为2d和3d
// 所有的图像绘制都是通过ctx的属性或方法来绘制的，和canvas标签无关了
let ctx = canvas.getContext("2d")

function drowRect(x,y,w,h,color){
    // 维护状态
    this.x = x
    this.y = y
    this.w = w
    this.h = h
    this.color = color
}
// 更新状态
drowRect.prototype.update = function(){
    this.x++
}
// 重新渲染
drowRect.prototype.render = function (){
    ctx.fillStyle = this.color
    ctx.fillRect(this.x,this.y,this.w,this.h,this.color)
}
// 创建俩对象实例
let r1 = new drowRect(50,100,100,100,'red')
let r2 = new drowRect(100,300,50,50,'blue')
// 动画过程
setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height)
    r1.update()
    r1.render()


    r2.update()
    r2.render()
},10)