1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 canvas{background: #F5F5F5}
8 </style>
9 </head>
10 <body>
11 <canvas id="canvas1" width="900" height="700">
12 当前浏览器不支持canvas
13 </canvas>
14 <script type="text/javascript">
15 var canvas=document.getElementById(‘canvas1‘);//定义变量获取画布DOM
16 var context=canvas.getContext(‘2d‘);//设置绘图环境为2d
17 context.lineWidth=4;
18 context.strokeStyle="#FF00FF";
19 context.moveTo(200,100);
20 context.lineTo(200,200);
21 context.lineTo(250,200);
22 context.lineTo(250,150);
23 context.lineTo(150,150);
24 context.lineTo(150,200);
25 context.lineTo(200,200);
26 context.lineTo(200,250);
27 //context.closePath();//从当前点回到起始点来封闭路径
28 context.stroke();
29 //绘制矩形
30 context.beginPath();//此句不能省，否则上面的图样式会受下面的设置影响
31 context.lineWidth=2;
32 context.strokeStyle="#0000FF";
33 context.rect(260,100,50,20) //语句结尾分号;可省
34 context.stroke();
35
36 context.beginPath();
37 context.strokeRect(320,100,50,30);
38
39 context.beginPath();
40 context.lineWidth=2;
41 context.fillStyle="#FF0000";
42 context.rect(380,100,40,20);
43 context.fill();
44
45 context.beginPath();
46 context.lineWidth=2;
47 context.fillStyle="#00FF00";
48 context.fillRect(430,100,50,50);
49
50 context.beginPath();
51 context.lineWidth=3;
52 context.arc(500,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针
53 context.stroke();
54
55 context.beginPath();
56 context.lineWidth=3;
57 context.arc(600,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针
58 context.fill();
59 context.stroke();
60
61 context.beginPath();
62 context.arc(600,100,50,0,(Math.PI)/2);
63 context.stroke();
64
65 context.beginPath();
66 context.arc(700,100,50,0,(Math.PI)/2);
67 context.closePath();
68 context.fill();
69 context.stroke();
70
71 //绘制扇形，思路很好！
72 context.beginPath();
73 context.strokeStyle="#F5F5F5";
74 context.moveTo(200,400);
75 context.arc(200,400,150,Math.PI*7/6,Math.PI*11/6);
76 context.fill();
77 context.stroke();
78 context.beginPath();
79 context.fillStyle="#F5F5F5";
80 context.strokeStyle="#F5F5F5";
81 context.moveTo(200,400);
82 context.arc(200,400,50,Math.PI*7/6,Math.PI*11/6);
83 context.fill();
84 context.stroke();
85 context.beginPath();
86 context.moveTo(200,400);
87 context.lineWidth=5;
88 context.arc(200,400,50,Math.PI*11/6,Math.PI*11/6);
89 context.stroke();
90
91 context.beginPath();
92 context.lineWidth=1;
93 context.strokeStyle="#000000";
94 context.fillStyle="#000000";
95 context.font="40px 隶书";
96 context.strokeText("黄山",280,400);
97 context.fillText("天柱山",380,400);
98 context.strokeStyle="#FFFF00";
99 context.fillStyle="#00FFFF";
100 context.fillText("方特欢乐世界",500,400);
101 context.strokeText("方特欢乐世界",500,400);
102 </script>
103 </body>
104 </html>
时间： 2024-12-08 01:32:47