HTML5Canvas的解說以及實例教學

HTML5 Canvas

標籤定義圖形，例如圖表和其他圖像，您必須使用腳本來繪製圖形。

在畫布上（Canvas）畫一個紅色矩形，漸層矩形，彩色矩形，和一些彩色的文字。

什麼是Canvas?

HTML5 元素用於圖形的繪製，透過腳本(通常是JavaScript#)來完成.

標籤只是圖形容器，您必須使用腳本來繪製圖形。

你可以透過多種方法使用Canva繪製路徑,盒、圓、字元以及新增影像。

瀏覽器支援

Internet Explorer 9+, Firefox, Opera, Chrome, andSafari 支援 元素.

##注意: Internet Explorer 8 及更早IE版本的瀏覽器不支援 元素.

建立一個畫布（Canvas）

一個畫佈在網頁中是一個矩形框，透過 元素來繪製.

注意: 預設情況下 元素沒有邊框和內容。

簡單實例如下:

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

注意: 標籤通常需要指定一個id屬性(腳本中經常引用), width 和height 屬性定義的畫布的大小.

提示:你可以在HTML頁面中使用多個 元素.

使用style 屬性來新增邊框:

實例

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

使用JavaScript 來繪製圖像

canvas 元素本身是沒有

繪圖能力的。所有的繪製工作必須在JavaScript 內部完成：

實例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

實例解析:

首先，找到 元素:

var c=document.getElementById("myCanvas");

然後，建立context

物件：

var ctx=c.getContext("2d");

getContext("2d") 物件是內建的HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及新增映像的方法。

下面的兩行程式碼繪製一個紅色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

設定fillStyle屬性可以是CSS顏色，漸變，或圖案。 fillStyle 預設值是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形目前的填滿方式。

Canvas 座標

canvas 是一個二維網格。

canvas 的左上角座標為 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

【相關推薦】

1. 

特別推薦：「php程式設計師工具箱」V0.1版本下載

2. 

免費h5線上影片教學

#3. 

php.cn原始html5影片教學

########

以上是HTML5Canvas的解說以及實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！