                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

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

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

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-2

关注问题我要回答

1247

操作

收起

5 回答

小桔子呀回答被采纳 +3 积分
2016-07-15

好多函数名都写错了啊。。。

<!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 回复有任何疑惑可以回复我~

#1

不想采蜜的工蜂提问者

非常感谢！

2016-07-19 回复有任何疑惑可以回复我~

森林迷了鹿Andera
2016-08-30

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

0 回复有任何疑惑可以回复我~

qq_阿呆_5
2016-08-25

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

0 回复有任何疑惑可以回复我~

小桔子呀
2016-07-15

//定义变量数组

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 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

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

参与学习 96725 人
解答问题 999 个

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

本课相似问答

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

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

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

2 回答求大神指教

1 回答求大神指教

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载