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>