HTML5 canvas学习的实例介绍-H5教程-PHP中文网

HTML5 canvas学习的实例介绍

零下一度

发布： 2017-06-30 15:30:33

原创

1842人浏览过

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标签绘制图片

BtoC购物网站源码

一、源码特点1、采用典型的三层架构技术进行开发，作品非常不错，功能很全面，欢迎下载学习交流二、功能介绍本源码是一个购物网站源码。分为前台用户界面和后台管理员界面，分别实现不同功能。三、菜单功能前台用户功能1、主页：显示主页面2、鞋子：鞋子所有品牌及相关信息3、手机数码：数码品牌及相关信息4、护肤品：所有品牌及相关信息5、新闻资讯：本页资讯；行业资讯6、我的账户；我的收藏；我的购物车；我的评论；退出

查看详情

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学习的实例介绍的详细内容，更多请关注php中文网其它相关文章！