脚本获取上下文 getContext

canvas提供api来自哪里， 获取渲染canvas的上下文，就是获取到一个对象，挂载含有提供api的对象，咱们须要用这个对象提供api来绘制。html

<script>
        var cvs_1 = document.getElementById('cvs_1');
        var ctx = cvs_1.getContext('2d');
        console.log(ctx)
        for(api in ctx){
            console.log(api)
        }
    </script>

canvas兼容处理

标签兼容：

不支持canvas的浏览器会把标签忽略为自定义标签，显示里面的内容java

<canvas id="cv" width="100" height="100" >
        你看到这个的时候就是你浏览器不兼容 你看咋处理吧
    </canvas>

api兼容

有些兼容很差的api 须要根据按需求来判断兼容并处理git

//  不支持api 该给用设置户友好提示了
    if(!ctx.getContext) return;

填充 方形和 fillStyle、fillRect

ctx.fillStyle = 'red';
    ctx.fillRect(10,10,50,50);

解读

上面咱们获取到了canvas上下文，拿到对象能够对对象操做，以上两个属性和方法就是小栗子；github

fillStyle

属性值默认 #000 ,是一个string字符串，用于设置接下来绘制的颜色，能够设置为颜色的对象、rgb、rgba等；canvas

fillRect

方法接收四个参数，分别是x、y、width、height；x、y是绘制图形的起点（左上角x，左上角y）api

作点啥?

简单的例子

笑果以下：

源代码地址：点击查看浏览器

还能够慢慢作点别有趣的小动画 以下：

点击查看代码：点击查看dom

拓展

绘制 矩形边框 rect

ctx.strokeStyle='blue';
    ctx.rect(10,10,70,70);
    ctx.stroke();

绘制 矩形区域 strokeRect

ctx.strokeStyle = 'blue';
    ctx.strokeRect(1,1,90,90);

清除 矩形区域

ctx.clearRect(40,40,10,10)

以上参数原理都同样，从命名理解：
fill... 填充
stroke... 绘制
clear... 清除动画