为什么会没有结果呢？求大神指点-慕课网

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

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

不想采蜜的工蜂

2016-07-15 09:58

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

写回答关注

4回答

小桔子呀

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>

1 0

不想采蜜的工...

非常感谢！

2016-07-19 13:30:22

共 1 条回复 >
森林迷了鹿Andera

2016-08-30 14:21:50

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

0 0
qq_阿呆_5

2016-08-25 11:25:28

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

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

飞天意大利面...

这个数组才是对的。

2016-10-20 17:08:40

共 1 条回复 >

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

96746 学习 · 1000 问题

查看课程

相似问题

求大神指点，为什么时钟能变化，但是没有小球的效果？

回答 2

为什么我的没有效果呢不知道哪里错了求大神指导

回答 4

图形一样，但就是没有颜色，求大神指点

回答 5

求大神指教

回答 1

求大神指教

回答 2

打开慕课网App查看更多内容