Html5 Canvas初探學習筆記(1)-畫一個長方形

canvas元素是Html5#相對於先前的Html的一個新增特性，本部分的部落格文章就將研究這個元件的應用，尤其是在網頁遊戲開發上的應用。

canvas元件和之前的table和p等元件類似，都是不需要任何外部外掛程式就可以運作的。只需使用html並且使用2D渲染上下文API（2Drender context API）類似於我們j2me開發中的Grapics和android中的canvas#畫筆，只要得到這個上下文就可以呼叫它自帶的方法來繪製。

我們可以透過以下的方法定義一個canvas：

<canvas id="canvas" width="400" height="400"> </canvas>

Canvas的是作為2D渲染上下文的一個包裝器，#2D渲染上下文是基於canvas畫布的「畫筆」。它採用平面的笛卡爾座標系統，左上角為原點（0，0）。向右移動，x的座標值會增加，往下移動時，y值會增加，這點很像我們的j2me的畫布。

好了，在介紹了一些基本概念以後，我將建立第一個Html5 Canvas，首先效果圖如下

很簡單的一個例子，就是畫一個長方形，下面來看程式碼：

其中canvas的標籤處就是定義一個 canvas畫布，但並沒有做任何的處理，標籤script的部分是##js的程式碼部分，其中如下的部分是獲得渲染上下文：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

首先獲得

canvas元素，然後獲得#2d渲染得上下文。

如下的程式碼是畫矩形部分：

context.fillStyle = '#000000';
context.fillRect(50, 50, 100, 100);

先設定顏色，然後再畫，四個參數分別是起點的橫縱座標和寬高

 以上就是Html5 Canvas初探學習筆記(1)-畫一個矩形 的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#