!doctype html  html lang= en  head  title Canvas 2D畫線和面 /title  /head  body  canvas id= cv width= 150 height= 150 /canvas  /body  /html 

canvas是HTML5中的元素，當(dāng)沒有設(shè)置寬度和高度的時(shí)候，canvas會(huì)初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小；如果在繪制時(shí)圖像會(huì)伸縮以適應(yīng)它的框架尺寸，那么CSS的尺寸與初始畫布的比例不一致，會(huì)出現(xiàn)扭曲。

canvas起初是空白的。為了展示，首先腳本需要找到渲染上下文，然后在它的上面繪制。 canvas 元素有一個(gè)做 getContext() 的方法，這個(gè)方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個(gè)參數(shù)，上下文的格式。對(duì)于2D圖像而言你可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById( cv var ctx = canvas.getContext( 2d 

兼容性檢查在不支持 canvas 標(biāo)簽的瀏覽器中如何展示替換內(nèi)容。通過簡單的測試getContext()方法的存在，腳本可以檢查編程支持性。上面的代碼片段現(xiàn)在變成了這個(gè)樣子：var canvas = document.getElementById( tutorial if (canvas.getContext){ var ctx = canvas.getContext( 2d  // drawing code here} else { // canvas-unsupported code here}

獲得了context，就好像獲得了畫筆，這時(shí)我們?cè)诋嫴忌袭嬒乱粋€(gè)方塊：

 ctx.fillStyle = rgba(0, 0, 200, 0.5)  ctx.fillRect (30, 30, 55, 50);

CanvasRenderingContext2D.fillRect() 是Canvas 2D API 繪制填充矩形的方法。矩形的起點(diǎn)在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle 屬性決定矩形的樣式。

同理，畫一條線也是調(diào)用ctx的方法：

ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(100, 100);ctx.stroke();

CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零環(huán)繞規(guī)則，根據(jù)當(dāng)前的畫線樣式，繪制當(dāng)前或已經(jīng)存在的路徑的方法。
上面的代碼中我們先繪制一條路徑，然后通過stroke方法用當(dāng)前的樣式把這個(gè)路徑渲染出來。

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. VeVb.com原創(chuàng)html5視頻教程

以上就是html5中Canvas的使用--畫線和面的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。