为什么会没有结果呢？求大神指点

源自：2-2 绘制直线、多边形和七巧板

为什么会没有结果呢？求大神指点

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<title>canvas绘制七巧板</title>
</head>
<body>
	<canvas id = "canvas" style="display:block; margin:0px auto; border:1px,solid,#ccc;"></canvas>

	<script>
	//定义变量数组
	var tangram = [
		{p:[{x:250,y:50},{x:750,y:50},{x:500,y:300}],color:"#DE9D9D"},
		{p:[{x:250,y:50},{x:250,y:550},{x:500,y:300}],color:"#94B892"},
		{p:[{x:375,y:425},{x:250,y:550},{x:500,y:550}],color:"#E2BB47"},
		{p:[{x:375,y:425},{x:500,y:550},{x:625,y:375},{x:500,y:300}],color:"#7B5287"},
		{p:[{x:500,y:550},{x:625,y:375},{x:750,y:550}],color:"#587CA6"},
		{p:[{x:625,y:375},{x:750,y:550},{x:500,y:550}],color:"#437240"},
		{p:[{x:625,y:375},{x:625,y:125},{x:750,y:50},{x:750,y:300}],color:"#5970A4"}
	]

	//绘制
	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(piece,cxt){
		
		cxt.beginPath();

		cxt.movtTo(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>

提问者：不想采蜜的工蜂 2016-07-15 09:58

个回答

小桔子呀

2016-07-15 10:26:01

已采纳

好多函数名都写错了啊。。。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>canvas绘制七巧板</title>
</head>
<body>
<canvas id = "canvas" style="display:block; margin:0px auto; border:1px,solid,#ccc;"></canvas>

<script>
//定义变量数组
var tangram = [
{p:[{x:250,y:50},{x:750,y:50},{x:500,y:300}],color:"#DE9D9D"},
{p:[{x:250,y:50},{x:250,y:550},{x:500,y:300}],color:"#94B892"},
{p:[{x:375,y:425},{x:250,y:550},{x:500,y:550}],color:"#E2BB47"},
{p:[{x:375,y:425},{x:500,y:550},{x:625,y:375},{x:500,y:300}],color:"#7B5287"},
{p:[{x:500,y:550},{x:625,y:375},{x:750,y:550}],color:"#587CA6"},
{p:[{x:625,y:375},{x:750,y:550},{x:500,y:550}],color:"#437240"},
{p:[{x:625,y:375},{x:625,y:125},{x:750,y:50},{x:750,y:300}],color:"#5970A4"}
]

//绘制
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);
// console.log(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>

0
森林迷了鹿Andera

2016-08-30 14:21:50

数组的遍历是从0开始的，最后一个数的位置是length-1.。。。。

0
qq_阿呆_5

2016-08-25 11:25:28

for 循环中i是从0开始的，而不是1

0
小桔子呀

2016-07-15 10:50:52

//定义变量数组
var tangram = [
{p:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],color:"#CAFF67"},
{p:[{x:0,y:0},{x:0,y:600},{x:300,y:300}],color:"#67BECF"},
{p:[{x:600,y:0},{x:600,y:300},{x:450,y:450},{x:450,y:150}],color:"#EF3D61"},
{p:[{x:450,y:150},{x:450,y:450},{x:300,y:300}],color:"#F9F51A"},
{p:[{x:300,y:300},{x:450,y:450},{x:300,y:600},{x:150,y:450}],color:"#A594C0"},
{p:[{x:150,y:450},{x:300,y:600},{x:0,y:600}],color:"#FA8CCC"},
{p:[{x:600,y:600},{x:300,y:600},{x:600,y:300}],color:"#F6CA29"}
]

//绘制
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 ++)
draw(tangram[i],context);
// console.log(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();
}
完整的JS部分

1