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

说好的七巧板呢，老师帮忙看一下 thanks

<!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:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d6e"},

{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#cc99ff"},

{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800}],color:"#ff3366"},

{p:[{x:200,y:600},{x:400,y:800},{x:80,y:800}],color:"#ff66ff"},

{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.p.length;i++)

cxt.closePath();

cxt.fillStyle=piece.color;

cxt.fill();

}

</script>

</body>

</html>

如果巴黎不快乐01234

2015-11-11

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

关注问题我要回答

789

操作

收起

1 回答

李晓健
2015-11-17

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.fillStyle=piece.color;
    cxt.fill();
    cxt.closePath();
}

draw 方法给你改了下，但是你的坐标好像也不对。