                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫基礎(chǔ)

context在這里是全局變量吧，那么是不是在draw函數(shù)中就可以直接使用context來進(jìn)行繪制了，為什么還要在把context的值傳給cxt呢？求指點(diǎn)

$("#tangram").bind("click",function tangram() {
? ?var canvas = document.getElementById("canvas");
? ? canvas.width = 800;
? ? canvas.height = 700;
? ?if (canvas.getContext("2d")) {
? ? ? ?var context = canvas.getContext("2d");
? ?}
? ?else {
? ? ? ?alert("當(dāng)前瀏覽器不支持Canvas,推薦使用Chrome瀏覽器")
? ?}
? ?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:"yellow"},
? ? ? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
? ? ? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
? ? ? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
? ? ? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
? ? ? ?{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"red"},
? ?]
? ?for (var i=0;i<tangram.length;i++){
? ? ? ?draw(tangram[i]);
? ?}
? ?function draw(piece){
? ? ? ?context.beginPath();
? ? ? ?context.moveTo(piece.p[0].x,piece.p[0].y);
? ? ? ?for (var i=1;i<piece.length;i++){
? ? ? ? ? ?context.lineTo(piece[i].x,piece[i].y);
? ? ? ?}
? ? ? ?context.closePath();
? ? ? ?context.fillStyle=tangram[0].color;
? ? ? ?context.fill();
? ?}