1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>多边形着色</title>
6 </head>
7 <body>
8 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
9 当前浏览器不支持Canvas,请更换浏览器
10 </canvas>
11 <script>
12 var canvas=document.getElementById('canvas');
13 canvas.width=1024;
14 canvas.height=768;//也可以在这里设置width和height
15 var context=canvas.getContext('2d');
16 //使用context进行绘制
17
18 context.moveTo(100,100);
19 context.lineTo(700,700);
20 context.lineTo(100,700);
21 context.lineTo(100,100);
22 context.fillStyle="rgb(2,100,30)";
23 context.fill();
24
25 context.lineWidth=5;
26 context.strokeStyle="red";
27 context.stroke();
28 </script>
29 <!--
30 1.context.fillStyle="rgb(2,100,30)";和context.fill();//给多边形填充颜色
31 2.context.lineWidth=5;
32 context.strokeStyle="red";
33 context.stroke();
34 //为外边框着色
35 -->
36 </body>
37 </html>
