canvas（一）从零开始

前言

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... 清除