的HTML <canvas>元件用於繪製在網頁上的圖形。
圖形向左與創建<canvas> 。 它顯示了四個元件：一個紅色矩形，梯度矩形，多色矩形和多色文本。
什麼是HTML Canvas ？
的HTML <canvas>元素用於繪製圖形，在飛行中，通過腳本(usually JavaScript)
所述<canvas>元素僅用於圖形的容器。 您必須使用腳本來實際繪製圖形。
Canvas具有繪製路徑，矩形，圓形，文本和添加圖像的幾種方法。
畫布元件是HTML5的一部分，並且允許在2D形狀和位圖圖像的動態，腳本化渲染。 它是一種低層次的，程序模式，更新位圖，沒有一個內置的場景圖。
瀏覽器支持
在表中的數字指定完全支持所述第一瀏覽器版本<canvas>元素。
| 元件 | |||||
|---|---|---|---|---|---|
| <canvas> | 4 | 9 | 2.0 | 3.1 | 9 |
歷史
帆布最初是由蘋果公司推出了2004年供電應用，如Dashboard構件和Safari瀏覽器自己的Mac OS X的WebKit組件內部使用。
後來，在2005年它在的Gecko的瀏覽器和Opera 1.8版本於2006年通過，並通過網絡超文本應用技術工作組（WHATWG）在新提出的規格為下一代Web技術標準化。
用法
畫布在於HTML代碼定義的高度和寬度的屬性的可拉伸區域的。 JavaScript代碼可以通過全套類似其他常見2D的API的繪圖功能訪問區域，從而允許動態地產生的圖形。
帆布的一些預期用途包括建築圖形，動畫，遊戲和圖片組成。
Canvas例子
一個canvas是一個HTML頁面上的矩形區域。 默認情況下， canvas有沒有邊界，沒有內容。
該標記看起來是這樣的：
<canvas id="myCanvas" width="200" height="100"></canvas>
Note:總是指定的id屬性(to be referred to in a script) ，和一個寬度和高度屬性來定義的大小canvas 。
要添加邊框，使用style屬性：
基本Canvas例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> 試一試» 使用JavaScript繪圖
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); 試一試» 畫一條線
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); 試一試» 畫一個圓
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); 試一試» 繪製文本
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); 試一試» 行程文本
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); 試一試» 繪製線性漸變
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); 試一試» 繪製圓形漸變
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); 試一試» 繪製圖像
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); 試一試» HTML Canvas教程
要了解所有關於HTML <canvas> ， 請訪問我們的完整的HTML Canvas教程 。