Html5 Canvas笔记(2)-Canvas绘图

用Canvas API绘图，需要画图形的边线并设置内部区域填充，边线英文语法对应stroke，填充对应fill，在后面我们会频繁看到这2个英文单词的出现。Canvas API内置的形状绘图函数比较少，可以完成绘制矩形Rect、弧形Arc，也可以画贝塞尔曲线bezierCurver、quadraticCurve。下面我们一个一个的来说。

画线-Line

1 function drawScreen(){
2     context.strokeStyle=‘black‘;
3     context.lineWidth=10;
4     context.lineCap=‘square‘;
5     context.beginPath();
6     context.moveTo(20,0);
7     context.lineTo(100,0);
8     context.closePath();
9 }

矩形-Rect

1 function drawScreen(){
2     context.fillStyle=‘#000000‘;        //设置图形填充样式
3     context.strokeStyle=‘#ff00ff‘;      //设置图形线框样式
4     context.lineWidth=2;                //指定线宽
5     context.fillRect(10,10,40,40);      //填充矩形区域
6     context.strokeRect(0,0,60,60);      //描绘矩形边框
7     context.clearRect(20,20,20,20);     //清空矩形区域
8 }