首頁(yè) 猿問(wèn) 我的代碼如下，沒(méi)有顯示七色板，求問(wèn)題所在

我的代碼如下，沒(méi)有顯示七色板，求問(wèn)題所在

Html5

悠悠我的心 2016-06-29 15:33:49

<!doctype html><html><head>? ? <meta charset="utf-8">? ? ? ? <title>tes6--H5關(guān)于七巧板</title>? ? <style type="text/css">? ? #myCanvas{display:block;border:1px solid #f00; margin:50px auto;}? ? </style></head><body>? ? <canvas id="canvas" width="800" height="800"></canvas></body><script > ??var 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:"#67brcf"},? ? ?{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:"#a594c0"},? ? ?{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},? ? ?{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#ef3d61"}]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(tangram[i],context){ context.beginPath(); context.moveTo(tangram.p[0].x,tangram.p[0].y); for(var i=1;i<tangram.p.length;i++) context.lineTo(tangram.p[0].x,tangram.p[0].y); context.closePath(); context.fillStyle=tangram.color; context.fill(); context.strokeStyle="black" context.lineWidth=3; context.stroke();}</script> ?</body> ?</html> ?

查看完整描述

2 回答

已采納

qyy2499760117_葉子

TA貢獻(xiàn)188條經(jīng)驗(yàn) 獲得超91個(gè)贊

<!doctype html>
<html>
<head>
? ?<meta charset="utf-8">
? ?
? ?<title>tes6--H5關(guān)于七巧板</title>
? ?<style type="text/css">
? ? ? ?#myCanvas{display:block;border:1px solid #f00; margin:50px auto;}
? ?</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
<script >
? ?var 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:"#67brcf"},
? ? ? ?{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:"#a594c0"},
? ? ? ?{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
? ? ? ?{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#ef3d61"}
? ?]
? ?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++){ ? ?//tangram.length這樣寫

? ? ? ? ? ?draw(tangram[i],context)
? ? ? ?}

? ?}
? ?function draw(tangram,context){ ? /tangram[i]? ?不能寫i,?draw(tangram,context)不在onload里面，i無(wú)法獲取

?? ?context.beginPath();
? ? ? ?context.moveTo(tangram.p[0].x,tangram.p[0].y);
? ? ? ?for(var i=1;i<tangram.p.length;i++)
? ? ? ? ? ?context.lineTo(tangram.p[0].x,tangram.p[0].y);
? ? ? ?context.closePath();
? ? ? ?context.fillStyle=tangram.color;
? ? ? ?context.fill();
? ? ? ?context.strokeStyle="black"
? ? ? ?context.lineWidth=3;
? ? ? ?context.stroke();
? ?}
</script>
</body>
</html>

反對(duì) 回復(fù) 2016-06-29

悠悠我的心
好的，謝謝

回復(fù) 2016-08-06

_瀟瀟暮雨

TA貢獻(xiàn)646條經(jīng)驗(yàn) 獲得超225個(gè)贊

3個(gè)錯(cuò)誤，都寫到注釋中了：

?var?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:"#67brcf"},
?????{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:"#a594c0"},
?????{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
?????{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#ef3d61"}
]
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++)?//?數(shù)組.length
????????draw(tangram[i],context)
}
//?這里的第一個(gè)參數(shù)錯(cuò)了
function?draw(tangram,context){
????context.beginPath();
????context.moveTo(tangram.p[0].x,tangram.p[0].y);

????for(var?i=1;i<tangram.p.length;i++)
????????context.lineTo(tangram.p[i].x,tangram.p[i].y);?//?是i不是0

????context.closePath();
????context.fillStyle=tangram.color;
????context.fill();
????context.strokeStyle="black"
????context.lineWidth=3;
????context.stroke();
}

1 反對(duì) 回復(fù) 2016-06-29