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="1200">
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
103 //线性渐变
104 g=context.createLinearGradient(100,450,300,300);
105 g.addColorStop(0,"#000000");
106 g.addColorStop(0.2,"#ffffff");
107 g.addColorStop(0.4,"#FF0000");
108 g.addColorStop(0.6,"#00ff00");
109 g.addColorStop(1,"#0000ff");
110 context.fillStyle=g;
111 context.fillRect(100,450,300,300)
112
113 //放射性渐变
114 r=context.createRadialGradient(650,550,0,650,550,100);
115 r.addColorStop(0,"#000000");
116 r.addColorStop(0.2,"#ffffff");
117 r.addColorStop(0.4,"#FF0000");
118 r.addColorStop(0.6,"#00ff00");
119 r.addColorStop(1,"#0000ff");
120 context.fillStyle=r;
121 context.arc(650,550,100,0,Math.PI*2);
122 context.fill();
123
124 //太极图
125 g1=context.createLinearGradient(40,920,320,920);
126 g1.addColorStop(0,"#000000");
127 g1.addColorStop(1,"#ffffff");
128
129 g2=context.createLinearGradient(40,920,320,920);
130 g2.addColorStop(0,"#ffffff");
131 g2.addColorStop(1,"#000000");
132
133 g3=context.createRadialGradient(120,1000,0,120,1000,10);
134 g3.addColorStop(0,"#ffffff");
135 g3.addColorStop(1,"#000000");
136
137 g4=context.createRadialGradient(280,1000,0,280,1000,10);
138 g4.addColorStop(0,"#000000");
139 g4.addColorStop(1,"#ffffff");
140
141 context.beginPath();
142 context.arc(200,1000,160,0,Math.PI);
143 context.arc(120,1000,80,0,Math.PI,true);
144 context.arc(280,1000,80,Math.PI,0,true);//没看懂为什么会反着颜色？
145 context.fillStyle=g1;
146 context.fill();//上面的疑问懂了：fill功能是把上面3个弧围成的区域填充！
147
148 context.beginPath();
149 context.arc(200,1000,160,0,Math.PI,true);
150 context.arc(280,1000,80,0,Math.PI);
151 context.arc(120,1000,80,Math.PI,0);
152 context.fillStyle=g2;
153 context.fill();
154
155 context.beginPath();
156 context.fillStyle=g3;
157 context.arc(120,1000,10,0,Math.PI*2);
158 context.fill();
159
160 context.beginPath();
161 context.fillStyle=g4;
162 context.arc(280,1000,10,0,Math.PI*2);
163 context.fill();
164
165 //设置文字阴影
166 context.shadowOffsetX=10;
167 context.shadowOffsetY=10;
168 context.shadowBlur=5;
169 context.shadowColor="red";
170 context.fillStyle="blue";
171 context.font="70px 隶书";
172 context.fillText("舌尖上的中国",400,700);
173
174 //绘制饼图
175 context.beginPath();
176 context.shadowOffsetX=0;
177 context.fillStyle="black";
178 context.shadowColor="gray";
179 context.fillText("绘制饼图",400,800);
180 context.fillStyle="red";
181 context.moveTo(700,1000);
182 context.arc(700,1000,150,0,Math.PI/3);
183 context.fill();
184 context.closePath();//还可设closePath();
185 context.beginPath();
186 context.fillStyle="blue";
187 context.moveTo(700,1000);
188 context.arc(700,1000,150,Math.PI/3,Math.PI);
189 context.fill();
190 context.closePath();
191 context.beginPath();
192 context.fillStyle="green";
193 context.moveTo(700,1000);
194 context.arc(700,1000,150,Math.PI,Math.PI*5/3);
195 context.fill();
196 context.closePath();
197 context.beginPath();
198 context.fillStyle="yellow";
199 context.moveTo(700,1000);
200 context.arc(700,1000,150,Math.PI*5/3,Math.PI*2);
201 context.fill();
202 context.closePath();
203 context.fillStyle="black";
204 context.font="20px 隶书";
205 context.fillText("15%",750,1050);
206 context.fillText("35%",650,1050);
207 context.fillText("35%",650,950);
208 context.fillText("15%",750,950);
209 </script>
210 </body>
211 </html>
