canvas基础——绘制简单的图形
绘制直线：
HTML部分：
1 <canvas id="myCanvas" style="border:1px solid #000;" width="200px" height="100px"></canvas>
JS部分：
1 window.onload = function(){ 2 var c = document.getElementById('myCanvas'); 3 var context = c.getContext('2d'); 4 context.moveTo(0,0); //起点坐标 5 context.lineTo(200,100); //终点坐标 6 context.stroke(); //绘制直线 7 };
绘制直线中使用了3个方法：moveTo，lineTo和stroke.
其中moveTo方法用于创建新的子路径，并规定起始坐标点为（x,y），即moveTo(x,y);
linTo方法用于从moveTo方法规定的起始坐标点开始绘制一条到规定坐标的直线，即lineTo(x,y);
上面两个方法规定了直线路径的起点和终点，而stroke方法用于沿着该路径绘制一条直线。
绘制矩形：
JS代码：
1 var c = document.getElementById('myCanvas'); 2 var context = c.getContext('2d'); 3 context.fillStyle = 'red'; 4 context.fillRect(0,0,100,50); 5 context.strokeStyle = 'white'; 6 context.strokeRect(0,0,50,25);
在上面的代码中，fillStyle属性用于指定要绘制的图形的填充颜色，而fillRect方法用于以指定的颜色填充一个矩形，括号中的参数用于指定矩形的坐标位置和大小。
fill是填充，stroke是轮廓，所以用strokeStyle和strokeRect方法绘制矩形轮廓。
绘制圆形：
1 var c = document.getElementById('myCanvas'); 2 var context = c.getContext('2d'); 3 context.fillStyle = 'red'; 4 context.beginPath(); 5 context.arc(100,75,50,0,Math.PI*2,true); 6 context.closePath(); 7 context.fill();
圆形的绘制仍然是采用路径并填充颜色的方法。
beginPath()：开始绘制路径
closePath()：用于结束绘制路径
arc()：用于绘制圆形
用法：context.ar(x,y,radius,startAngle,endAngle,anticlockwise)
arc方法本意是绘制弧线，当采用适当的参数后即可绘制圆形，参数中的x,y为起点坐标，radius为圆形的半径，startAngle为开始的角度，
endAngle为结束的角度，anticlockwise为是否逆时针（true）为逆时针，(false)为顺时针方向进行绘制。
绘制圆弧实例
1 var c = document.getElementById('myCanvas'); 2 var context = c.getContext('2d'); 3 for(var i = 0; i<10; i++){ 4 context.strokeStyle = 'red'; 5 context.beginPath(); 6 context.arc(0,150,i*15,0,Math.PI*3/2,true); 7 //context.closePath(); 8 context.stroke(); 9 }
这里最后一句的stroke方法用于在显示设备中输出线条，这里少了一句closePath，即没有闭合路径。
绘制三角形：
1 var c = document.getElementById('myCanvas'); 2 var context = c.getContext('2d'); 3 context.fillStyle = 'red'; 4 context.beginPath(); 5 context.moveTo(25,25); 6 context.lineTo(150,25); 7 context.lineTo(25,150); 8 context.closePath(); 9 context.fill(); 10 //context.strokeStyle = 'blue'; 11 //context.stroke(); 12 };
通过4到8行之间的代码，实现三角路径的绘制。
清空画布
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas基础2</title> <script> window.onload = function(){ var oBtn = document.getElementById('btn'); var c = document.getElementById('myCanvas'); var context = c.getContext('2d'); //画条弧线 context.strokeStyle = 'red'; context.beginPath(); context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true); context.stroke(); //清空画布 oBtn.onclick = function(){ context.clearRect(0,0,300,200); }; }; </script> </head> <body> <canvas id="myCanvas" width="300px" height="200px" style="border:1px solid #000"></canvas> <br/> <input id="btn" type="button" value="清空画布"> </body> </html>
使用clearRect方法可清除指定的矩形区域内的所有图形。该方法是：context.clearRect(x,y,width,height)。
绘制贝塞尔曲线
绘制二次方贝塞尔曲线
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas基础2</title> <script> window.onload = function(){ var c = document.getElementById('myCanvas'); var context = c.getContext('2d'); //绘制二次方贝塞尔曲线 context.strokeStyle = 'red'; context.beginPath(); context.moveTo(0,200); context.quadraticCurveTo(75,50,300,200); context.stroke(); context.globalCompositeOperation = 'source-over'; //下面绘制的直线用于表示上面曲线的控制点（两直线的交点）和控制线 context.strokeStyle = 'green'; context.beginPath(); context.moveTo(75,50); context.lineTo(0,200); context.moveTo(75,50); context.lineTo(300,200); context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="300px" height="200px" style="border:1px solid #000"></canvas> </body> </html>
quadraticCurveTo方法用于绘制贝塞尔曲线，用法：context.quadraticCurveTo(cplx,cply,x,y);
其中参数cplx和cply是控制点坐标，x和y是终点坐标。
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
属性值
| 值 | 描述 |
|---|---|
| source-over | 默认。在目标图像上显示源图像。 |
| source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
| source-in | 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。 |
| source-out | 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。 |
| destination-over | 在源图像上显示目标图像。 |
| destination-atop | 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。 |
| destination-in | 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。 |
| destination-out | 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。 |
| lighter | 显示源图像 + 目标图像。 |
| copy | 显示源图像。忽略目标图像。 |
| xor | 使用异或操作对源图像与目标图像进行组合。 |
实例
所有 globalCompositeOperation 属性值：
<html> <head> <style> canvas { border:1px solid #d3d3d3; margin-right:10px; margin-bottom:20px; } </style> </head> <body> <script> var gco=new Array(); gco.push("source-atop"); gco.push("source-in"); gco.push("source-out"); gco.push("source-over"); gco.push("destination-atop"); gco.push("destination-in"); gco.push("destination-out"); gco.push("destination-over"); gco.push("lighter"); gco.push("copy"); gco.push("xor"); for (n=0;n<gco.length;n++) { document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>"); var c=document.createElement("canvas"); c.width=120; c.height=100; document.getElementById("p_" + n).appendChild(c); var ctx=c.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,50,50); ctx.globalCompositeOperation=gco[n]; ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill(); document.write("</div>"); } </script> </body> </html>
绘制三次方贝塞尔曲线
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas基础3</title> <script> window.onload = function(){ var c = document.getElementById('myCanvas'); var context = c.getContext('2d'); //绘制三次方贝塞尔曲线 context.strokeStyle = 'red'; context.beginPath(); context.moveTo(0,200); context.bezierCurveTo(25,50,75,50,300,200); context.stroke(); context.globalCompositeOperation = 'source-over'; //下面绘制的直线用于表示上面曲线的控制点（两直线的交点）和控制线 context.strokeStyle = 'green'; context.beginPath(); context.moveTo(25,50); context.lineTo(0,200); context.moveTo(75,50); context.lineTo(300,200); context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="300px" height="200px" style="border:1px solid #000"></canvas> </body> </html>
bezierCurveTo方法用于绘制三次方贝塞尔曲线，用法：context.bezierCurveTo(cplx,cply,cp2x,cp2y,x,y);
其中参数cplx和cply是第一个控制点的坐标，cp2x和cp2y是第二个控制点的坐标，x和y是终点的坐标。
相关参考：http://www.w3cschool.cc/jsref/prop-canvas-globalcompositeoperation.html
