自學HTML5第四節（canvas畫布詳解），html5canvas

最後更新：2014-10-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

canvas畫布好像可是說是HTML5的精華了，一定要學好，嗯嗯，絢麗的東西就要從基礎的開始。。。。

先看看啥玩意叫做canvas

什麼是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製映像。

畫布是一個矩形地區，您可以控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。

建立一個canvas

向 HTML5 頁面添加 canvas 元素。

規定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

矩形的繪製

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

<script type="text/javascript">var c=document.getElementById("myCanvas");    //使用 id 來尋找 canvas 元素：var cxt=c.getContext("2d");      //建立 context 對象：getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法
cxt.fillStyle="#FF0000";     //代碼繪製一個紅色的矩形：    
cxt.fillRect(0,0,150,75);</script>

1. fillRect()

2. strokeRect()

線條

通過指定從何處開始，在何處結束，來繪製一條線：

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>

<canvas id="myCanvas" width="200" height="100">1. lineWidth

圓形

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>

漸層

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(0.5,"#00FF00");
grd.addCOlorStop(1,"#212121");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>

<canvas id="myCanvas" width="200" height="100">映像<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="flower.png"cxt.drawImage(img,0,0);</script>
 



對於HTML5的畫布canvas畫已有映像功可以純html5無法高效地做到，但是你可以用PNG映像，先把所有黑色部分填成透明
  
對於HTML5清除canvas畫布問題
是啊，好奇怪呀。。。為什麼呢。。。不過倒是可以投機取巧：

<body>
<canvas id="bo" width="500" height="500" style="border:1px solid">您的瀏覽器不支援次應用，請更新瀏覽器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script src="code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
var canvasInit = function(){
  var canvas = document.getElementById('bo');
  var pic=canvas.getContext("2d");
  pic.lineWidth=5;
  pic.strokeStyle="red";
  var con=false;
  $("#bo").mousedown(function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop; 
    con=true;
    pic.moveTo(mouseX,mouseY);
  });
  $("#bo").mouseup(function(e){
    con=false;
  })
  $("#bo").mousemove(function(e){
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    if(con)
      pic.lineTo(mouseX,mouseY);
    pic.stroke();
  })
}
canvasInit();
function clea(){
  var tmp = $('#bo').clone();
  $('#bo').remove();
  $('body').prepend(tmp);
  canvasInit();
//pic.clearRect(0,0,500,500);
}
</script>...餘下全文>>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

自學HTML5第四節（canvas畫布詳解），html5canvas

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support