标签：
用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 }
标签：
原文地址：http://www.cnblogs.com/alexywt/p/4731372.html
