1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload = function () { 8 var canvas = document.getElementById("canvas"); 9 canvas.width = "400"; 10 canvas.height = "400"; 11 if (canvas.getContext("2d")) { 12 var context = canvas.getContext("2d"); 13 } 14 else { 15 alert("当前浏览器不支持canvas，请更换浏览器后再试"); 16 } 17 //把7个点的位置坐标和颜色存入一个数组 18 var points = [ 19 { p: [{ x: 0, y: 0 }, { x: 400, y: 0 }, { x: 200, y: 200 }], color: "#caff67" }, 20 { p: [{ x: 0, y: 0 }, { x: 200, y: 200 }, { x: 0, y: 400 }], color: "#67becf" }, 21 { p: [{ x: 400, y: 0 }, { x: 400, y: 200 }, { x: 300, y: 300 }, { x: 300, y: 100 }], color: "#ef3d61" }, 22 { p: [{ x: 300, y: 100 }, { x: 300, y: 300 }, { x: 200, y: 200 }], color: "#f9f51a" }, 23 { p: [{ x: 200, y: 200 }, { x: 300, y: 300 }, { x: 200, y: 400 }, { x: 100, y: 300 }], color: "#a594c0" }, 24 { p: [{ x: 100, y: 300 }, { x: 200, y: 400 }, { x: 0, y: 400 }], color: "#fa8ecc" }, 25 { p: [{ x: 400, y: 200 }, { x: 400, y: 400 }, { x: 200, y: 400 }], color: "#f6ca29" } 26 ] 27 28 function draw() { 29 //遍历数组，以每个点为起点画图 30 for (var i = 0; i < points.length; i++) { 31 context.beginPath(); 32 context.moveTo(points[i].p[0].x, points[i].p[0].y); 33 for (var j = 0; j < points[i].p.length; j++) { 34 context.lineTo(points[i].p[j].x, points[i].p[j].y); 35 } 36 context.lineTo(points[i].p[0].x, points[i].p[0].y); 37 context.strokeStyle = "black"; 38 context.lineWidth = "3"; 39 context.fillStyle = points[i].color; 40 context.stroke(); 41 context.fill(); 42 context.closePath(); 43 } 44 } 45 draw(); 46 47 } 48 </script> 49 </head> 50 <body> 51 <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持canvas，请更换浏览器后再试</canvas> 52 </body> 53 </html>