代碼哪里出錯了呢？不能出現七巧板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas {
border: 1px solid #CCC;
margin: 50px auto;
display: block;
/*不設置寬高的時候默認是300px寬 150px高*/
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'red'},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'black'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'red'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'black'}
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'red'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'black'}
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'red'},
]
window.onload = function() {
var canvas = document.getElementById('canvas');
canvas.height=768;
canvas.width=1024;
if(canvas.getContext('2d')){
var content=canvas.getContext('2d');
}else{
alert('當前瀏覽器不支持canvas');
};
for(var i=0; i<tangram.length; i++)
draw(tangram[i],content);
}
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTO(piece.p[0].x,piece.p[0].y);
for(var i=1;i<picec.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-04-11
數組tangram有兩行沒有逗號，cxt.moveTo寫成了cxt.moveTO，for(var i=1;i<picec.p.length;i++)中的piece，cxt.lineTo(piece.p[i].x,piece.p[i],y)中的最后一個點號寫成了逗號。全是低級錯誤
2016-05-01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas數組繪制七巧板</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa; margin:50px auto; display:block;"></canvas>
<script>
var tangram=[
{p:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],color:"#caff67"},
{p:[{x:0,y:0},{x:300,y:300},{x:0,y:600}],color:"#67becf"},
{p:[{x:600,y:600},{x:600,y:300},{x:600,y:600},{x:600,y:150}],color:"#ef3d61"},
{p:[{x:600,y:150},{x:600,y:600},{x:300,y:300}],color:"#a594c0"},
{p:[{x:300,y:300},{x:600,y:600},{x:300,y:600},{x:150,y:600}],color:"#fa8ccc"},
{p:[{x:150,y:600},{x:300,y:600},{x:0,y:600}],color:"#f6ca29"},
{p:[{x:600,y:300},{x:600,y:600},{x:300,y:600}],color:"#f5f91a"},
?? ?]
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)
}
?? ?
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>
按照老師的視頻做的，只不過改了尺寸，為何沒有效果？求大神告知