代碼哪里出錯(cuò)了呢？不能出現(xiàn)七巧板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas {
border: 1px solid #CCC;
margin: 50px auto;
display: block;
/*不設(shè)置寬高的時(shí)候默認(rèn)是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('當(dāng)前瀏覽器不支持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
數(shù)組tangram有兩行沒(méi)有逗號(hào)，cxt.moveTo寫成了cxt.moveTO，for(var i=1;i<picec.p.length;i++)中的piece，cxt.lineTo(piece.p[i].x,piece.p[i],y)中的最后一個(gè)點(diǎn)號(hào)寫成了逗號(hào)。全是低級(jí)錯(cuò)誤
2016-05-01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas數(shù)組繪制七巧板</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++)?? //數(shù)組遍歷
?? ??? 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>
按照老師的視頻做的，只不過(guò)改了尺寸，為何沒(méi)有效果？求大神告知