HTML5 canvas學習的實例介紹

window.onload = function(){    createCanvas();   }  function createCanvas(){   var canvas_width= 200, canvas_height = 200;     document.body.innerHTML = "<canvas id="canvas" width=""+canvas_width+"" height=""+canvas_height+""></canvas>";    }

var canvas_width= 500, canvas_height = 500;var mycanvas, context;    window.onload = function(){    createCanvas();    drawRect();   }  function createCanvas(){          document.body.innerHTML = "<canvas id="mycanvas" width=""+canvas_width+"" height=""+canvas_height+""></canvas>";     mycanvas = document.getElementById("mycanvas");     context = mycanvas.getContext("2d");    }     function drawRect(){   context.fillStyle ="#FF0000"; //context.rotate(45);//旋轉45度   //context.translate(200,200);//移動   //context.scale(2,0.5);//縮放   context.fillRect(0,0,200,200);    }

var canvas_width= 500, canvas_height = 500;var mycanvas, context;    window.onload = function(){    createCanvas();    drawImage();   }  function createCanvas(){          document.body.innerHTML = "<canvas id="mycanvas" width=""+canvas_width+"" height=""+canvas_height+""></canvas>";     mycanvas = document.getElementById("mycanvas");     context = mycanvas.getContext("2d");    }     function drawImage(){ var img = new Image();   img.onload = function(){    context.drawImage(img,0,0);   }   img.src = "1.png";    }