1 <canvas id="mycanvas"></canvas>
2 var c=document.getElementById("mycanvas");
3 c.width=500;
4 c.height=500;
5 var ctx=c.getContext("2d");
6 画矩形
7
8 ctx.fillStyle="#ff0000";
9 ctx.fillRect(0,0,200,200);
10 画线
11 ctx.moveTo(0,0);
12 ctx.lineTo(200,200);
13 ctx.stroke();
14 画圆
15 ctx.fillStyle="#ff0000";//实心颜色
16 ctx.beginPath();
17 ctx.arc(100,100,50,0,Math.PI*2,true);
18 ctx.closePath();
19 ctx.fill();//填充颜色
20
21 画三角形
22 ctx.strokeStyle="#ff0000";框架颜色，线的颜色
23 ctx.beginPath();
24 ctx.moveTo(25,25);
25 ctx.lineTo(150,25);
26 ctx.lineTo(25,150)
27 ctx.closePath();
28 ctx.stroke();
29
30 贝塞尔曲线 www.j--d.com/bezier
31
32 ctx.lineWidth=6;
33 ctx.strokeStyle="#ff0000";
34 ctx.beginPath();
35 ctx.moveTo(0,200);起点
36 ctx.quadraticCurveTo(75,50,300,200);节点坐标，终点坐标|锚点坐标
37 ctx.stroke();
38
39
40 //三次贝塞尔曲线
41 ctx.bezierCurveTo(205,56,239,439,400,250); 第一个节点，第二个节点，锚点坐标
42
43 保存恢复canvas状态
44 ctx.fillStyle="#ff0000";
45 ctx.strokeStyle="#00ff00";
46 cxt.fillRect(20,20,200,100);
47 ctx.strokeRect(20,20,200,100);
48 ctx.fill();
49 ctx.stroke();
50 ctx.save();保存当前的状态
51
52 ctx.fillStyle="#ffffff";
53 ctx.strokeStyle="#0000ff";
54 ctx.fillRect(200,200,100,50);
55 ctx.strokeRect(200,200,100,50);
56 ctx.fill();
57 ctx.stroke();
58
59 ctx.restore(); 恢复状态,直接调用原来保存的样式
60 ctx.fillRect(300,300,100,100);
61 ctx.strokeRect(300,300,100,100);
62
63 缩放
64 ctx.scale(0.5,3); 宽度，高度
65 位移
66 ctx.translate(100,50);
67 旋转
68 ctx.rotate(30*Math.PI/180); 参数是弧度
69 1度=pi/180
70
71 图形的组合与裁切 www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp
72
73 ctx.fillStyle="#ff0000";
74 ctx.fillRect(50,25,100,100);
75 ctx.globalCompositeOperation="source-in";
76 ctx.fillStyle="#00ff00";
77 ctx.beginPath();
78 ctx.arc(150,125,50,0,Math.PI*2,true);
79 ctx.closePath();
80 ctx.fill();
