学习Canvas绘图与动画基础 为多边形着色（三）

 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>