HTML5 canvas学习的实例介绍

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

var canvas_width= 500, canvas_height = 500;var mycanvas, context;window.onload = function(){  createCanvas();  drawRect(); }  function createCanvas(){      document.body.innerHTML = "<canvas></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></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";  }