Canvas繪圖與動畫詳解
1、canvas 繪制
當canvas不設置大小時，默認寬300，高150；
註意：不建議使用css 設置大小，可以利用行內樣式 width="",height=""去設置（無單位）；
canvas 是基於狀態進行繪制的；
舉例說明：
上述代碼顯示結果為全部均為黑色；
如何更改？ 在繪制前context.beginPath(),結束後 context.closePath();
練習： 七巧板
<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: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(‘clock‘);
// canvas.width,canva.height
canvas.width = 800;
canvas.height = 800;
//使用context進行繪制
var context = canvas.getContext(‘2d‘);
for(var i=0;i<tangram.length;i++){
draw(tangram[i],context);
}
}
function draw(piece,ctx){
ctx.beginPath();
ctx.moveTo(piece.p[0].x,piece.p[0].y);
for(var i=1;i<piece.p.length;i++){
ctx.lineTo(piece.p[i].x,piece.p[i].y);
}
ctx.closePath();
ctx.fillStyle=piece.color;
ctx.fill();
}
</script>
註意： beginPath 與 closePath不一定要成對出現；beginPath代表重新規劃一個新路線；
closePath表示要結束當前的路徑，如果沒有封閉會自動封閉上；其對於fill()沒有用
Canvas繪圖與動畫詳解