HTML5 canvas学习小例代码

2021-07-08 12:07

阅读：789

标签：translate blog 绘制图形 drawrect span image element create doc

1.HTML5中的Canvas标签的创建

window.onload = function(){
  createCanvas();
 }
  function createCanvas(){
   var canvas_width= 200, canvas_height = 200;
   document.body.innerHTML = "";
  }

2.HTML5Canvas标签绘制图形

var canvas_width= 500, canvas_height = 500;
var mycanvas, context;

window.onload = function(){
  createCanvas();
  drawRect();
 }
  function createCanvas(){
   
   document.body.innerHTML = "";
   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 = "";
   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学习小例代码

标签：translate blog 绘制图形 drawrect span image element create doc

原文地址：http://www.cnblogs.com/moqiutao/p/7097163.html

上一篇：js全选删除

下一篇：C#基础

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML5 canvas学习小例代码
文章链接：http://soscw.com/index.php/essay/102373.html

亲，登录后才可以留言！

HTML5 canvas学习小例代码

评论

热门文章

推荐文章

最新文章

置顶文章