首页 > 代码库 > HTML5七巧板canvas绘图（复习）
HTML5七巧板canvas绘图（复习）
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 var context = canvas.getContext("2d");10 canvas.width = "400";11 canvas.height = "400";12 var points = [13 { p: [{ x: 0, y: 0 }, { x: 400, y: 0 }, { x: 200, y: 200 }], color: "red" },14 { p: [{ x: 0, y: 0 }, { x: 200, y: 200 }, { x: 0, y: 400 }], color: "orange" },15 { p: [{ x: 400, y: 0 }, { x: 400, y: 200 }, { x: 300, y: 300 }, { x: 300, y: 100 }], color: "yellow" },16 { p: [{ x: 300, y: 100 }, { x: 300, y: 300 }, { x: 200, y: 200 }], color: "green" },17 { p: [{ x: 200, y: 200 }, { x: 300, y: 300 }, { x: 200, y: 400 }, { x: 100, y: 300 }], color: "cyan" },18 { p: [{ x: 100, y: 300 }, { x: 200, y: 400 }, { x: 0, y: 400 }], color: "blue" },19 { p: [{ x: 400, y: 200 }, { x: 400, y: 400 }, { x: 200, y: 400 }], color: "purple" }20 ]21 for (var i = 0; i < points.length; i++) {22 context.beginPath();23 //context.moveTo(points[i].p[0].x, points[i].p[0].y);24 for (var j = 0; j < points[i].p.length; j++) {25 context.lineTo(points[i].p[j].x, points[i].p[j].y);26 context.fillStyle = points[i].color;27 }28 context.closePath();29 context.lineWidth = "3";30 context.strokeStyle = "black";31 context.stroke();32 context.fill();33 }34 }35 </script>36 </head>37 <body>38 <canvas id="canvas" style="border:5px solid red ;margin:50px,auto;"></canvas>39 </body>40 </html>
HTML5七巧板canvas绘图（复习）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。