Latest web development tutorials

HTML <canvas> 標籤

實例

通過<canvas> 元素來顯示一個紅色的矩形:

< canvas id = " myCanvas " > </ canvas > < script type = " text/javascript " > var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100 ); </ script >

嘗試一下»

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

IE 9、Firefox、Opera、Chrome 和Safari 支持<canvas> 標籤。

註釋: IE 8或更早版本的IE瀏覽器不支持<canvas>標籤。


標籤定義及使用說明

<canvas> 標籤通過腳本(通常是JavaScript)來繪製圖形(比如圖表和其他圖像)。

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


HTML 4.01 與HTML5之間的差異

<canvas> 標籤是HTML5 中的新標籤。


提示和註釋

註釋: <canvas>元素中的任何文本將會被顯示在不支持<canvas>的瀏覽器中。

提示:如想了解canvas對象的所有屬性和方法,請參閱HTML畫布參考手冊


屬性

New : HTML5中的新屬性。

属性 描述
height New pixels 规定画布的高度。
width New pixels 规定画布的宽度。

全局屬性

<canvas>標籤支持HTML的全局屬性


事件屬性

<canvas>標籤支持HTML的事件屬性