HTML5 canvas learning sample code and html5canvas sample code

HTML5 canvas learning sample code and html5canvas sample code

1.Create a Canvas tag in HTML5

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

2.HTML5Canvas label drawing

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); // rotate 45 degrees // context. translate (200,200); // move // context. scale (2, 0.5); // scale the context. fillRect (200,200 );}

3.HTML5Canvas labels

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