lovebet[js高手之路] html5 canvas教程 – 绘制七巧板。[js高手之路] html5 canvas教程,html5canvas

七刚好板长什么样?

[js高手之路] html5 canvas教程,html5canvas

七刚刚板长什么样?

lovebet 1

用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详解

<head> <meta charset=’utf-8′ /> <style> #canvas {
border: 1px dashed #aaa; } </style> <script> window.onload
= function () { var oCanvas = document.querySelector(“#canvas”), oGc =
oCanvas.getContext(‘2d’), width = oCanvas.width, height =
oCanvas.height, tangram = [ { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, {
x: 400, y: 400 }], color: “#caff67” }, //正上方绿色三角形区域 { p: [{
x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: “#67becf”
}, //左方蓝色三角形区域 { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, {
x: 600, y: 600 }, { x: 600, y: 200 }], color: “#ef3d61” }, { p: [{ x:
600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color:
“#f9f51a” }, { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400,
y: 800 }, { x: 200, y: 600 }], color: “#a54c09” }, { p: [{ x: 200, y:
600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: “#fa8ccc” }, { p:
[{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color:
“#f6ca29″ } ]; for (var i = 0; i < tangram.length; i++) { draw(
oGc, tangram[i]); }; function draw( cxt, piece ) { cxt.beginPath();
cxt.moveTo(piece.p[0].x, piece.p[0].y); for (var i = 1; i <
piece.p.length; i++) { cxt.lineTo(piece.p[i].x, piece.p[i].y); }
cxt.closePath(); cxt.fillStyle = piece.color; cxt.fill(); } }
</script> </head> <body> <canvas id=”canvas”
width=”800″ height=”800″></canvas> </body>

run code

 

http://www.bkjia.com/HTML5/1228732.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1228732.htmlTechArticle\[js高手之路\] html5 canvas教程,html5canvas
七恰巧板长什么样?
用canvas把他画画出来,其实就是是管立即7个区域之图,每个点的坐标找出来,再就此mo…

lovebet 2

故此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详解

<head> <meta charset=’utf-8′ /> <style> #canvas {
border: 1px dashed #aaa; } </style> <script> window.onload
= function () { var oCanvas = document.querySelector(“#canvas”), oGc =
oCanvas.getContext(‘2d’), width = oCanvas.width, height =
oCanvas.height, tangram = [ { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, {
x: 400, y: 400 }], color: “#caff67” }, //正上方绿色三角形区域 { p: [{
x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: “#67becf”
}, //左方蓝色三角形区域 { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, {
x: 600, y: 600 }, { x: 600, y: 200 }], color: “#ef3d61” }, { p: [{ x:
600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color:
“#f9f51a” }, { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400,
y: 800 }, { x: 200, y: 600 }], color: “#a54c09” }, { p: [{ x: 200, y:
600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: “#fa8ccc” }, { p:
[{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color:
“#f6ca29″ } ]; for (var i = 0; i < tangram.length; i++) { draw(
oGc, tangram[i]); }; function draw( cxt, piece ) { cxt.beginPath();
cxt.moveTo(piece.p[0].x, piece.p[0].y); for (var i = 1; i <
piece.p.length; i++) { cxt.lineTo(piece.p[i].x, piece.p[i].y); }
cxt.closePath(); cxt.fillStyle = piece.color; cxt.fill(); } }
</script> </head> <body> <canvas id=”canvas”
width=”800″ height=”800″></canvas> </body>

run code