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

七巧板的问题

<!DOCTYPE html>

<html>

<head>

<title>七巧板的实现</title>

</head>

<body>

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:"#67becf"},

{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:"#f6ca29"}

];

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.moveTo(piece.p[0].x,piece.p[0].y);

for (var i=1;i<piece.length;i++) {

cxt.lineTo(piece.p[i].x,piece.p[i].y);

}

cxt.closePath();

cxt.fillStyle = piece.color;

cxt.fill();

}

</script>

</body>

</html>

自己到底哪里错了?

飞飞赫赫

2016-03-31

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

关注问题我要回答

954

操作

收起

2 回答

dennyzhou 回答被采纳 +3 积分
2016-03-31

for (var i=1;i<piece.p.length;i++) {

cxt.lineTo(piece.p[i].x,piece.p[i].y);

}

应该是piece对象的p属性的长度

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

收起回答

飞飞赫赫提问者

非常感谢！

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

慕斯4708754
2016-03-31

function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);
for(var i = 0;i<piece.p.length;i++){
cxt.lineTo(piece.p[i].x,piece.p[i].y);

}
cxt.closePath();
cxt.fillStyle = piece.color;
cxt.fill();

cxt.strokeStyle = "black";
cxt.stroke();
}

第2个for循环里，索引应该是var i = 0；

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

收起回答