首页  »   HTML5

[js好手之路] html5 canvas教程

网友分享于:2013-10-22  浏览:0次
[js高手之路] html5 canvas教程

七巧板长什么样?

用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可。

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script>
 9         window.onload = function () {
10             var oCanvas = document.querySelector("#canvas"),
11                 oGc = oCanvas.getContext('2d'),
12                 width = oCanvas.width, height = oCanvas.height,
13                 tangram = [
14                 { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" }, //正上方绿色三角形区域
15                 { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67becf" }, //左方蓝色三角形区域
16                 { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },
17                 { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f51a" },
18                 { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a54c09" },
19                 { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ccc" },
20                 { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" }
21             ];
22             for (var i = 0; i < tangram.length; i++) {
23                 draw( oGc, tangram[i]);
24             };
25             function draw( cxt, piece ) {
26                 cxt.beginPath();
27                 cxt.moveTo(piece.p[0].x, piece.p[0].y);
28                 for (var i = 1; i < piece.p.length; i++) {
29                     cxt.lineTo(piece.p[i].x, piece.p[i].y);
30                 }
31                 cxt.closePath();
32 
33                 cxt.fillStyle = piece.color;
34                 cxt.fill();
35             }
36         }
37     </script>
38 </head>
39 <body>
40     <canvas id="canvas" width="800" height="800"></canvas>
41 </body>

 tangram存储了每个形状的顶点坐标与填充颜色,p就是每个区域的顶点组成的数组,数组中每个点用一个json对象存储.,一个有7个形状,tangram就是7项,然后用循环,把每个区域的顶点和其他的点用线连起来。注意每个区域的点一定要用路径,至于为什么?可以参考我的这篇文章:[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解


 

相关解决方案

最新解决方案