<!DOCTYPE?html>
<html>
<head>
<meta?charset?=?"utf-8">
<title>canvas繪制七巧板</title>
</head>
<body>
<canvas?id?=?"canvas"?style="display:block;?margin:0px?auto;?border:1px,solid,#ccc;"></canvas>
<script>
//定義變量數組
var?tangram?=?[
{p:[{x:250,y:50},{x:750,y:50},{x:500,y:300}],color:"#DE9D9D"},
{p:[{x:250,y:50},{x:250,y:550},{x:500,y:300}],color:"#94B892"},
{p:[{x:375,y:425},{x:250,y:550},{x:500,y:550}],color:"#E2BB47"},
{p:[{x:375,y:425},{x:500,y:550},{x:625,y:375},{x:500,y:300}],color:"#7B5287"},
{p:[{x:500,y:550},{x:625,y:375},{x:750,y:550}],color:"#587CA6"},
{p:[{x:625,y:375},{x:750,y:550},{x:500,y:550}],color:"#437240"},
{p:[{x:625,y:375},{x:625,y:125},{x:750,y:50},{x:750,y:300}],color:"#5970A4"}
]
//繪制
window.onload?=?function(){
var?canvas?=?document.getElementById("canvas");
canvas.width?=?800;
canvas.height?=?800;
var?context?=?canvas.getContext("2d");
for(var?i?=?0?;i?<?tangram.length;i?++)
draw(tangram[i],context);
}
//繪制函數
function?draw(piece,cxt){
cxt.beginPath();
cxt.movtTo(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>
</body>
</html>
2016-07-15
好多函數名都寫錯了啊。。。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset = "utf-8">
? ? <title>canvas繪制七巧板</title>
</head>
<body>
? ? <canvas id = "canvas" style="display:block; margin:0px auto; border:1px,solid,#ccc;"></canvas>
?
? ? <script>
? ? //定義變量數組
? ? var tangram = [
? ? ? ? {p:[{x:250,y:50},{x:750,y:50},{x:500,y:300}],color:"#DE9D9D"},
? ? ? ? {p:[{x:250,y:50},{x:250,y:550},{x:500,y:300}],color:"#94B892"},
? ? ? ? {p:[{x:375,y:425},{x:250,y:550},{x:500,y:550}],color:"#E2BB47"},
? ? ? ? {p:[{x:375,y:425},{x:500,y:550},{x:625,y:375},{x:500,y:300}],color:"#7B5287"},
? ? ? ? {p:[{x:500,y:550},{x:625,y:375},{x:750,y:550}],color:"#587CA6"},
? ? ? ? {p:[{x:625,y:375},{x:750,y:550},{x:500,y:550}],color:"#437240"},
? ? ? ? {p:[{x:625,y:375},{x:625,y:125},{x:750,y:50},{x:750,y:300}],color:"#5970A4"}
? ? ]
?
? ? //繪制
? ? window.onload = function(){
?
? ? ? ? var canvas = document.getElementById("canvas");
?
? ? ? ? canvas.width = 800;
? ? ? ? canvas.height = 800;
?
? ? ? ? var context = canvas.getContext("2d");
?
? ? ? ? for(var i = 0 ;i < tangram.length;i ++)
? ? ? ? ? ? draw(tangram[i],context);
? ? ? ? ? ? // console.log(context);
? ? }
?
? ? //繪制函數
? ? function draw(piece,cxt){
? ? ? ? ?
? ? ? ? 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>
</body>
</html>
2016-08-30
數組的遍歷是從0開始的，最后一個數的位置是length-1.。。。。
2016-08-25
for 循環中i是從0開始的，而不是1
2016-07-15
//定義變量數組
var tangram = [
? ? {p:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],color:"#CAFF67"},
? ? {p:[{x:0,y:0},{x:0,y:600},{x:300,y:300}],color:"#67BECF"},
? ? {p:[{x:600,y:0},{x:600,y:300},{x:450,y:450},{x:450,y:150}],color:"#EF3D61"},
? ? {p:[{x:450,y:150},{x:450,y:450},{x:300,y:300}],color:"#F9F51A"},
? ? {p:[{x:300,y:300},{x:450,y:450},{x:300,y:600},{x:150,y:450}],color:"#A594C0"},
? ? {p:[{x:150,y:450},{x:300,y:600},{x:0,y:600}],color:"#FA8CCC"},
? ? {p:[{x:600,y:600},{x:300,y:600},{x:600,y:300}],color:"#F6CA29"}
]
//繪制
window.onload = function(){
? ? var canvas = document.getElementById("canvas");
? ? canvas.width = 600;
? ? canvas.height = 600;
? ? var context = canvas.getContext("2d");
? ? for(var i = 0 ;i < tangram.length;i ++)
? ? ? ? draw(tangram[i],context);
? ? ? ? // console.log(context);
}
//繪制函數
function draw(piece,cxt){
? ? ?
? ? 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();
}
完整的JS部分