HTML5canvas学习的实例介绍

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";
 }