https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
示例:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>html5 - canvas</title> <meta http-equiv="doc" content="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial"/> </head> <body> <canvas id="canvas_1" width="600" height="400" style="border:1px solid #ccc;"/> <script type="text/javascript"> var canvas_1 = document.getElementById('canvas_1'); var ctx = canvas_1.getContext('2d'); //1. draw line ctx.moveTo(20,20); ctx.lineTo(20,90); ctx.stroke(); // use stroke() method to draw line. //2. draw filled triangle. ctx.beginPath(); ctx.moveTo(40,20); ctx.lineTo(40,90); ctx.lineTo(80,90); ctx.closePath(); ctx.stroke(); // use stroke() method to draw line. ctx.fill(); // use fill() method to draw solid graphics. //3.1 draw rectangle ctx.strokeRect(100,20,70,70); // hollow.(having a hole or emputy inside) //3.2 draw rectangle ctx.fillStyle = "green"; // the fillStyle can be passed to a color. ctx.fillRect(190,20,50,50); // solid. //4. draw circle var cx = 250; var cy = 0; ctx.beginPath(); ctx.arc(cx+75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(cx+110,75); ctx.arc(cx+75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(cx+65,65); ctx.arc(cx+60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(cx+95,65); ctx.arc(cx+90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); // Draw shapes var cs = 400; var cy = 20; for (i=0;i<4;i++){ for(j=0;j<3;j++){ ctx.beginPath(); var x = cs+25+j*50; // x coordinate var y = cy+25+i*50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle var anticlockwise = i%2==1; // Draw anticlockwise ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } // draw text // fillText(text, x, y [, maxWidth]) ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 150); // stroke text // strokeText(text, x, y [, maxWidth]) ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 200); </script> </body> </html>