                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

說好的七巧板呢，老師幫忙看一下 thanks

<!doctype html>

<html>

?<head>

? <meta charset="utf-8">

? <title>七巧板案例</title>

?</head>

?<body>

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

? <script>

? 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繪圖與動畫基礎

關注問題我要回答

850

操作

收起

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 方法給你改了下，但是你的坐標好像也不對。