效果图
实现原理：
1.定义canvas标签。
2.获取canvas标签节点，创建canvas2D。
3.在canvas进行画图。
效果代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <canvas id="canvas" width="500" height="500" style="border: 1px solid #aaa;"></canvas> 11 <script type="text/javascript"> 12 var c = document.getElementById("canvas"); 13 var ctx = c.getContext("2d"); 14 15 //矩形 16 ctx.fillStyle = "#008000"; 17 ctx.fillRect(0, 0, 200, 200); 18 19 //文字 20 ctx.fillStyle = "#000000"; 21 ctx.font = "20px Georgia"; 22 ctx.strokeText("Hello World",200,200); 23 24 ctx.fillText("超人不会飞", 220, 220, 500); 25 26 //圆 27 ctx.beginPath(); 28 ctx.arc(100, 300, 40, 0, 2 * Math.PI); 29 ctx.stroke(); //空心圆 30 //ctx.fill();//实心圆 31 32 //斜线 33 ctx.moveTo(0, 0); 34 ctx.lineTo(500,500); 35 ctx.stroke(); 36 37 </script> 38 </body> 39 40 </html>