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

沒找到老師的源碼，自己抄了一套，大家看看吧

<!DOCTYPE?html>
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<title></title>
</head>
<body>
??<canvas?id="canvas"?style="border:1px?solid?#ccc;?margin:0?auto;?display:block;">
????如果不支持canvas，則顯示此消息
??</canvas>

??<script>

????var?tangram?=?[
??????{?p:?[{?x:?0,?y:?0?},?{?x:?800,?y:?0?},?{?x:?400,?y:?400?}],?color:?"#cff67"?},
??????{?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:?"#f9f5la"?},
??????{?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:?"#f6ca69"?}?
????]



????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.lineTo(piece.p[i].x,?piece.p[i].y);
??????}

????????cxt.closePath();????

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


??</script>
</body>
</html>