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

代码哪里出错了呢？不能出现七巧板

<!DOCTYPE html>

<html>

<head>

#canvas {

border: 1px solid #CCC;

margin: 50px auto;

display: block;

/*不设置宽高的时候默认是300px宽 150px高*/

}

</style>

</head>

<body>

var tangram=[

{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'red'},

{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'black'},

{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'red'},

{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'black'}

{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'red'},

{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'black'}

{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'red'},

]

window.onload = function() {

var canvas = document.getElementById('canvas');

canvas.height=768;

canvas.width=1024;

if(canvas.getContext('2d')){

var content=canvas.getContext('2d');

}else{

alert('当前浏览器不支持canvas');

};

for(var i=0; i<tangram.length; i++)

draw(tangram[i],content);

}

function draw(piece,cxt){

cxt.beginPath();

cxt.moveTO(piece.p[0].x,piece.p[0].y);

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

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

cxt.closePath();

cxt.fillStyle=piece.color;

cxt.fill();

}

</script>

</body>

</html>

欧耶233

2016-04-10

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

关注问题我要回答

1149

操作

收起

2 回答

xxboom 回答被采纳 +3 积分
2016-04-11

数组tangram有两行没有逗号，cxt.moveTo写成了cxt.moveTO，for(var i=1;i<picec.p.length;i++)中的piece，cxt.lineTo(piece.p[i].x,piece.p[i],y)中的最后一个点号写成了逗号。全是低级错误

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

收起回答

欧耶233 提问者

知道了，谢谢

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

洛黑
2016-05-01

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas数组绘制七巧板</title>

</head>

<body>
<canvas id="canvas" style="border:1px solid #aaa; margin:50px auto; display:block;"></canvas>

<script>
var tangram=[
{p:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],color:"#caff67"},
{p:[{x:0,y:0},{x:300,y:300},{x:0,y:600}],color:"#67becf"},
{p:[{x:600,y:600},{x:600,y:300},{x:600,y:600},{x:600,y:150}],color:"#ef3d61"},
{p:[{x:600,y:150},{x:600,y:600},{x:300,y:300}],color:"#a594c0"},
{p:[{x:300,y:300},{x:600,y:600},{x:300,y:600},{x:150,y:600}],color:"#fa8ccc"},
{p:[{x:150,y:600},{x:300,y:600},{x:0,y:600}],color:"#f6ca29"},
{p:[{x:600,y:300},{x:600,y:600},{x:300,y:600}],color:"#f5f91a"},
   ]

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

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>