1. 程式人生 > >15、HTML5 畫布

15、HTML5 畫布

繪圖 矩形 tco ont javascrip oat pad adding 完成

<canvas> 標簽定義圖形、,比如圖表和其他圖像,您必須使用腳本來繪制圖形

HTML5 <canvas> 元素用於圖形的繪制,通過腳本 (通常是JavaScript)來完成

<canvas> 標簽只是圖形容器,您必須使用腳本來繪制圖形

創建一個畫布:

一個畫布在網頁中是一個矩形框,通過 <canvas> 元素來繪制

註意: 默認情況下 <canvas> 元素沒有邊框和內容

實例 --->

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

註意:

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

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

使用 style 屬性來設置邊框,實例 --->

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

運行效果 --->

您的瀏覽器不支持 HTML5 canvas 標簽。

提示:瀏覽器還未支持HTML5

使用JavaScript來繪制圖像:

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

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>

<script>

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

</script>

實例解析:

首先,找到 <canvas> 元素:

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)。

坐標實例

如下圖所示,畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。鼠標移動的矩形框上,顯示定位坐標。

X Y

15、HTML5 畫布