HTML5 canvas学习的实例介绍

107 阅读 0 评论 71 点赞

我是靠谱客的博主故意西牛，最近开发中收集的这篇文章主要介绍HTML5 canvas学习的实例介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.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学习的实例介绍的详细内容，更多请关注靠谱客其它相关文章！