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

2.HTML5Canvas标签绘制图形

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

3.HTML5Canvas标签绘制图片

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

以上就是HTML5 canvas学习的实例介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！