小編給大家分享一下HTML5中canvas的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)建站已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、武寧網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1.HTML5中的Canvas標(biāo)簽的創(chuàng)建

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

2.HTML5Canvas標(biāo)簽繪制圖形

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);//旋轉(zhuǎn)45度
 //context.translate(200,200);//移動
 //context.scale(2,0.5);//縮放
 context.fillRect(0,0,200,200);
  }

3.HTML5Canvas標(biāo)簽繪制圖片

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的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！