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();