用Canvas API绘图，须要画图形的边线并设置内部区域填充，边线英文语法对应stroke，填充对应fill，在后面咱们会频繁看到这2个英文单词的出现。Canvas API内置的形状绘图函数比较少，能够完成绘制矩形Rect、弧形Arc，也能够画贝塞尔曲线bezierCurver、quadraticCurve。下面咱们一个一个的来讲。javascript
画线-Linehtml
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 }
lineCap属性：用于定义线条、路径、边框线端点。java
butt：默认值，端点是垂直于线段边缘的平直边缘；round：端点是在线段边缘处以线宽为直径的半圆；
square：端点是在线段边缘处以线宽为长、以一半线宽为宽的矩形；
lineJoin属性：定义两条线相交产生的拐角。canvas
miter：默认值，在链接处边缘延长相接；bevel：链接处是一个对角线斜角；
round：链接处是一个圆；
lineWidth属性：线宽，默认值为1.0。函数
strokeStyle属性：定义线和形状边框的颜色和样式。post
矩形-Rectspa
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 }
fillRect(x,y,width,height)：在位置(x,y)绘制宽width，高height的填充矩形code
strokeRect(x,y,width,height)：在位置(x,y)绘制宽width，高height的矩形外框htm
clearRect(x,y,width,height)：从位置(x,y)开始清除宽width，高height的矩形区域，使其透明blog
注：必定要注意大小写的区别，javascript中是区分大小写的，一旦代码中输入的属性名、方法名或变量名等大小写输入错误，会致使运行错误；
弧线-Arc
1 function drawScreen(){ 2 context.beginPath(); 3 context.strokeStyle="black"; 4 context.lineWidth=5; 5 context.arc(100,100,20,0,(Math.PI/180)*270,false); 6 context.stroke(); 7 8 context.moveTo(0,0); 9 context.lineTo(100,200); 10 context.arcTo(350,350,100,100,20); 11 context.closePath(); 12 }
arc(x,y,radius,startAngle,endAngle,anticlockwise)：
(x,y)：圆心坐标；radius：圆弧半径；
anticlockwise：画圆弧的方向,true表示逆时针,false表示顺时针；
startAngle,endAngle：圆弧的起始角度与结束角度；
arcTo(x1,y1,x2,y2,radius)：
(x1,y1)：圆弧的起点位置坐标；(x2,y2)：圆弧结束位置坐标；