<!doctype html><html><head>? ? <meta charset="utf-8">? ? <!-- <script type="text/javascript" src="jquery-1.8.2.min.js"></script> -->? ? <title>tes6--H5關于七巧板</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貢獻188條經驗 獲得超91個贊
<!doctype html>
<html>
<head>
? ?<meta charset="utf-8">
? ?<!-- <script type="text/javascript" src="jquery-1.8.2.min.js"></script> -->
? ?<title>tes6--H5關于七巧板</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無法獲取
?? ?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>
-
悠悠我的心好的，謝謝
_瀟瀟暮雨
TA貢獻646條經驗 獲得超225個贊
3個錯誤，都寫到注釋中了：
?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++)?//?數組.length
????????draw(tangram[i],context)
}
//?這里的第一個參數錯了
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();
}- 2 回答
- 0 關注
- 1459 瀏覽
添加回答
舉報
0/150
提交
取消