canvas笔记

一、什么是canvas

HTML5 提出了一个新的 canvas 标签，彻底颠覆了 Flash 的主导地位。无论是广告、游戏都可以使用 canvas 实现了，Canvas 是一个轻量级的画布，我们使用 Canvas 进行 JavaScript 的编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅

二、基本使用

<canvas width='400' height='400' id='mycanvas'>
当前浏览器不支持canvas，请升级浏览器
</canvas>

canvas的标签属性只有两个，width和height,表示画布的宽度和高度

方法	说明
getContext()	得到画布上下文，2d的上下文，3d的上下文
fillStyle	设置颜色
fillRect(x,y,width,height)	方法绘制“已填充”，默认的填充颜色是黑色

三、canvas的编程思想

1、像素化

我们使用 canvas 绘制了一个图形，一旦绘制成功了，canvas 就像素化了他们。 canvas 没有能力，从画布上再次得到这个图形，也就是说我们没有能力去修改已经在画布上的内容。这个就是 canvas 比较轻量的原因，Flash 重的原因之一就有它可以通过对应的 api 得到已经上 “画布” 的内容然后再次绘制，如果我们想要让这个 canvas 图形移动，必须按照清屏 - 更新 - 渲染的逻辑进行编程，总之就是重新再画一次

2、动画思想

清屏——更新——渲染这个思想就可以为canvas的动画思想

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d")
ctx.fillStyle="blue"
// 设置信号量
var left=10;
setInterval(()=>{
    //清除画布
    ctx.clearRect(0,0,700,600)
    // 更新信号量
    left++;
    ctx.fillRect(left,left,100,100)
    if(left==700){
        left=10
    }
},4)

我们把每一次绘制的静态画面叫做 " 一帧 "，时间的间隔 (定时器的间隔) 就表示的是帧的间隔

3、面向对象实现canvas动画

因为canvas不能得到已经上屏的对象，所以我们要维持对象的状态，在canvas动画中，我们都使用面向对象的方式来维持canvas需要的属性和方法

// 获取画布
var can = document.getElementById("can")
var ctx = can.getContext("2d");
// 绘制方法
function Rect(x, y, w, h, color) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color
}
// 更新方法
Rect.prototype.update = function () {
    this.x++;
}
// 渲染
Rect.prototype.render = function () {
    // 设置颜色
    ctx.fillStyle = this.color;
    // 渲染
    ctx.fillRect(this.x, this.y, this.w, this.h);
}
// 实例化
var r1 = new Rect(100, 100, 50, 50, "#91d5ff")
// 动画过程
setInterval(() => {
    //清屏
    ctx.clearRect(0, 0, can.width, can.height)
    //更新
    r1.update()
    // 渲染
    r1.render()
}, 5)

动画过程中在主定时器里面，每一帧都会调用实例的更新和渲染方法

四、canvas绘制功能

方法	说明
fillStyle	设置填充颜色
fillRect(x,y,width,height)	方法绘制“已填色”的矩形。
strokeStyle	设置边框颜色
stokeRect(x,y,width,height)	方法绘制“边框”矩形
clearRect(x,y,width,height)	清除画布内容
globalAlpha	设置透明度0-1