HTML5 & CSS3 初學者指南(4) – Canvas使用

77rou發表於2017-02-07
HTMLCSSS3Canvas

介紹

傳統的HTML主要用於文字的建立，可以通過<img>標籤插入影像，動畫的實現則需要第三方外掛。在這方面，傳統的HTML極其缺乏滿足現代網頁多媒體需求的能力。HTML5的到來，帶來了新的成員<canvas>標籤。

 

什麼是 Canvas？

HTML5 的 Canvas 元素使用 JavaScript 在網頁上繪製影像。

畫布是一個矩形區域，你可以控制其每一畫素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法。

 

建立 Canvas 元素

向 HTML5 頁面新增 Canvas 元素。

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

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

 

通過 JavaScript 來繪製

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

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); </script>
  • 首先，JavaScript 使用 id 來尋找 Canvas 元素： 
    var c=document.getElementById("myCanvas");
  • 其次，建立 context 物件： 
    var cxt=c.getContext("2d");
  • 然後，getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法。下面的兩行程式碼繪製一個紅色的矩形： 
    cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
  • 最後，使用fillStyle 方法，可將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

 

繪圖方法：

  • 線條以及填充

    • moveTo（）方法使用X和Y作為引數，在 Canvas 上設定引數指定的線條起始點。
    • lineTo（）方法使用X和Y作為引數，在 Canvas 上建立上一個點到引數指定點的路徑。
    • stroke（）方法繪製出了 Canvas 上，moveTo（）指定的點到 lineTo（）指定點的路徑線條。stroke（）方法沒有引數。
    • beginPath（）方法用於開始一個新路徑或重置當前路徑，沒有引數。
    • closePath（）方法用於建立從起始點到終點的路徑，有效的閉合並形成路徑的形狀，沒有引數。
    • fill（）方法用於為當前的路徑填充樣式。

JavaScript 程式碼： 

<script type="text/javascript"> var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d");
context.moveTo(250,50);
context.lineTo(150,100);
context.lineTo(250,150);
context.closePath();
context.stroke();
context.fill(); </script>

 

  • 文字

HTML5 提供了3個屬性 font、textAlign 和 textBaseline，用於定義 Canvas 上文字的不同狀態。

    • font 屬性設定或獲取字型屬性，如字型樣式、字重、字型大小和字型系列等。它遵循和 CSS 字型屬性相同的語法。
    • textAlign 屬性設定或獲取文字內容的水平對齊方式。textAlign 可以設定成5個值："start",  "end",  "right",  "left" 和 "center"
    • textBaseline 屬性設定或獲取文字內容的垂直對齊方式。textBaseline 可以設定成5個值："top",  "bottom",  "middle",  "aplhabetic" 和 "hanging"。

 

  • 漸變

    • strokeStyle 屬性設定或獲取 Canvas 上用於繪製路徑的顏色、漸變和圖案。
    • createLinearGradient（）方法通過將物件以值的形式分配給 strokeStyle 或者相關圖形的填充屬性，用於建立填充舉行，圓形，線條和文字的漸變物件。

createLinearGradient有4個引數：

      • 起點的X座標
      • 起點的Y座標
      • 終點的X座標
      • 終點的Y座標
    • createLinearGradient（）方法必須與 addColorStop（）方法一起使用，來指定漸變物件中的不同顏色和相對的位置。
    • addColorStop（）方法指定了漸變物件的顏色和位置。

addColorStop（）有2個引數：

    • 一個0.0到1.0之間的值，代表漸變中開始點和結束點的位置。
    • 該點位置的顏色

JavaScript 程式碼： 

<script type="text/javascript"> var canvas=document.getElementById('mycanvas'); var context=canvas.getContext('2d'); var gradient=context.createLinearGradient(50,30,50,170);
gradient.addColorStop(0,"red");
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.3","yellow");
gradient.addColorStop("0.5","green");
gradient.addColorStop("0.7","blue");
gradient.addColorStop("0.9","indigo");
gradient.addColorStop(1,"violet");
context.fillStyle=gradient;
context.fillRect(50,30,250,140); </script>

  • 圖片

    • DrawImage（）方法用於繪製輸入的影像，視訊等到 Canvas 上。

DrawImage（）方法有4個引數：

      • 放置影像的X座標
      • 放置影像的Y座標
      • 影像的寬度
      • 影像的高度
    • getImageData（）方法通過從 Canvas 上指定的矩形裡拷貝畫素資料，來建立一個圖形資料物件。

getImageData（）方法有4個引數：

      • 複製的矩形左上角X座標
      • 複製的矩形左上角Y座標
      • 複製矩形的寬度
      • 複製矩形的高度
    • putImageData（）方法用於將指定影像的畫素資料放回到 Canvas 上來。

putImageData（）方法有7個引數：

      • ImageData 物件
      • ImageData 物件左上角的x座標
      • ImageData 物件左上角的Y座標
      • 放置影像的X座標
      • 放置影像的Y座標
      • 繪製影像的寬度
      • 繪製影像的高度

本系列 HTML5 / CSS3 的知識介紹已經全部結束了，希望對學習 HTML5 / CSS3 的朋友有所幫助。大家在使用前端知識進行開發時，還可以藉助一些開發工具，如Wijmo，這是一款大而全面的前端 HTML5 / JavaScript UI控制元件集，能為企業應用提供更加靈活的操作體驗，現已全面支援Angular 2。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2133146/，如需轉載，請註明出處，否則將追究法律責任。

相關文章