前言

canvas是一个HTML5标签，提供使用脚本绘制图形图像的api；最先由Apple引入WebKit，现兼容ie9+的常规浏览器，目前能够使用个<canvas>元素来绘制2d图形。

开始准备

• 在常规的html页面中插入html标签容器 <canvas></canvas>
• 标签属性能够设置宽和高（默认300*150） <canvas width="100" height='100'></canvas>
• 因为咱们须要是用脚本绘制，要获取元素，能够设置id（固然其余途径获取dom亦可）<canvas id='cvs_1' width="100" height='100'></canvas>
• 至此咱们能够看到浏览器渲染出一个100*100的盒子容器（没有颜色，你能够使用浏览器看盒子模型）；

  

脚本获取上下文 getContext

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

<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的浏览器会把标签忽略为自定义标签，显示里面的内容

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

api兼容

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

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

填充 方形和 fillStyle、fillRect

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

解读

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

fillStyle

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

fillRect

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

作点啥?

简单的例子

笑果以下：

源代码地址：点击查看

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

点击查看代码：点击查看

拓展

绘制 矩形边框 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... 清除