Canvas是html5的新标签，看起来很屌的样子其实理解了就不难。Canvas意为画布，简单的来说通过Canvas提供的一些接口方法在这个指定的画布中画出我们想要的图片与执行一系列的动作。
<canvas id="cvs"></canvas>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
canvas是画布，getContext就好比是笔，通过ctx可以调用一堆的方式在画布上画图了。在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。
在开始之前我们先拿出画布和画笔：如果需要画一条直线
ctx.moveTo(50,50); ctx.lineTo(200,200);
2点确定一条线，moveTo与lineTo大概就是这个意思。但是会发现画布上没有预想中的线，什么也没有。因为我们还少了一个步骤.lineTo其实是画的一条“路径”，本身是不可见的。如果要让他显示出来，我们必须对他进行“画”的操作。
用过PS的同学，肯定能知道图形的两种模式，一种是填充，另一种是描边。现在我们已经画了一条线，相当于PS中勾了一条路径，此时给路径描一下边，就能显示出图形了。
ctx.stroke();
总的来说：Canvas绘制的总体的步骤
在代码22行处填入任务代码
绘制一个矩形 context.fillRect(x,y,width,height);
任务：
x= 110
y= 110
w = 100
h = 100
颜色是蓝色
参考：
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
ctx.fillStyle = "blue";
ctx.fillRect(110, 110, 100, 100);
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报