前言Canvas是一个HTML5标签，提供了使用脚本绘制图形和图像的api；最早由Apple引入WebKit，现在兼容ie9+常规浏览器。目前，因为我们需要使用脚本来绘制。获取元素，我们可以设置id（当然也可以通过其他方式获取dom）至此我们可以看到浏览器渲染一个100*100的盒子容器（没有颜色，可以用浏览器看盒子模型）；脚本获取提供的api来自的上下文getContextcanvas，获取绘制画布的上下文，即获取一个对象，挂载提供的api的对象，我们需要使用这个对象提供api来绘制。<脚本>varcvs_1=document.getElementById('cvs_1');varctx=cvs_1.getContext('2d');console.log(ctx)for(apiinctx){console.log(api)}Canvas兼容处理标签兼容性：不支持canvas的浏览器会忽略该标签作为自定义标签，显示里面的内容当你看到这个说明你的浏览器不兼容，你怎么处理？api兼容一些不兼容的APIcompatible，需要判断兼容性，根据自己的需要进行处理。//如果不支持api，你应该设置一个用户友好的提醒if(!ctx.getContext)return;填充正方形和fillStyle,fillRectctx.fillStyle='red';ctx.fillRect(10,10,50,50);解读上面我们已经获取到了canvas上下文，获取到对象后就可以对对象进行操作了。以上两个Attributes和method都是小栗子；fillStyle属性默认值为#000，是一个string字符串，用于设置接下来要绘制的颜色，可以设置为颜色对象，rgb，rgba等；fillRect方法接收四个参数，分别是x,y,width,height；x,y是绘制图形的起点（x在左上角，y在左上角）怎么办？一个简单的例子如下：源码地址：点击查看，还可以做一些有趣的事情小动画如下：点击查看代码：点击查看展开绘制矩形边框rectctx.strokeStyle='blue';ctx.rect(10,10,70,70);ctx.stroke();绘制矩形区域strokeRectctx.strokeStyle='blue';ctx.strokeRect(1,1,90,90);清除矩形区域ctx.clearRect(40,40,10,10）以上参数原理相同，从名字理解：fill...fillstroke...drawclear...clear
