canvas_简单练习

效果图

实现原理：

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>

View Code