<!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 关注
- 1426 浏览
添加回答
举报
0/150
提交
取消