我的代码如下，没有显示七色板，求问题所在

首页课程实战体系课手记专栏慕课教程

我的代码如下，没有显示七色板，求问题所在

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<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>

悠悠我的心

浏览 1427回答 2

2回答

qyy2499760117_叶子

<!doctype html><html><head> <meta charset="utf-8">  <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>

0 0

_潇潇暮雨

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(); }

1 0

随时随地看视频慕课网APP

相关分类

Html5