HTML5 canvas学习的实例介绍

1. HT ML 5中的Canvas标签的创建

window.onload = function(){
  createCanvas();
 }  function createCanvas(){    VAR  canvas_width= 200, canvas_h ei ght = 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=\" ;m ycanvas\" 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 学习的实例介绍的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 HTML5 canvas学习的实例介绍 全部内容，希望文章能够帮你解决 HTML5 canvas学习的实例介绍 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5 canvas学习的实例介绍的详细内容...