怎樣在html5中添加canvas標(biāo)簽

canvas 標(biāo)簽是 HTML 5 中的新標(biāo)簽。

網(wǎng)站設(shè)計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺管理系統(tǒng)；網(wǎng)站設(shè)計、做網(wǎng)站收費合理；免費進行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運營了10多年的創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司。

定義和用法

canvas 標(biāo)簽定義圖形，比如圖表和其他圖像。

canvas 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。

實例

通過 canvas 元素來顯示一個紅色的矩形：

!DOCTYPE?HTML

html

head

script?type="text/javascript"

var?canvas=document.getElementById('myCanvas');

var?ctx=canvas.getContext('24d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

/script

/head

body

canvas?id="myCanvas"your?browser?does?not?support?the?canvas?tag?/canvas

/body

/html

HTML5 - Canvas

HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

在使用 canvas 繪制圖像時，canvas 畫布左上角的坐標(biāo)為(0, 0)

注意：canvas 畫布大小不可通過 css 來改變，只能通過屬性方式設(shè)置，否則可能出現(xiàn)失幀的情況（當(dāng)使用 css 方式改變 canvas 畫布大小時，只是 cavas 標(biāo)簽的大小改變了，正真的繪圖區(qū)域大小并沒有改變，所以出現(xiàn)了失幀的情況）。

示例：

示例：

示例：

示例：

示例：

示例：

示例：

1）參數(shù)說明：

參數(shù) x：矩形左上角的 x 坐標(biāo)。

參數(shù) y：矩形左上角的 y 坐標(biāo)。

參數(shù) width：矩形的寬度，以像素計。

參數(shù) height：矩形的高度，以像素計。

2） 注意事項：

context.rect(x, y, width, height); 只是創(chuàng)建了矩形，并沒有繪制出來。因此，創(chuàng)建完成后需使用 context.stroke(); 來繪制。

3）示例：

1）參數(shù)說明：

參數(shù) x：矩形左上角的 x 坐標(biāo)。

參數(shù) y：矩形左上角的 y 坐標(biāo)。

參數(shù) width：矩形的寬度，以像素計。

參數(shù) height：矩形的高度，以像素計。

2）默認(rèn)的填充顏色是黑色?？梢允褂?fillStyle 屬性來設(shè)置用于填充繪圖的顏色、漸變或模式。

3）示例：

1）參數(shù)說明：

參數(shù) x：矩形左上角的 x 坐標(biāo)。

參數(shù) y：矩形左上角的 y 坐標(biāo)。

參數(shù) width：矩形的寬度，以像素計。

參數(shù) height：矩形的高度，以像素計。

2）筆觸的默認(rèn)顏色是黑色。

3）可以使用 strokeStyle 屬性來設(shè)置筆觸的顏色、漸變或模式。

4）示例：

1）參數(shù)說明：

參數(shù) x：要清除的矩形左上角的 x 坐標(biāo)。

參數(shù) y：要清除的矩形左上角的 y 坐標(biāo)。

參數(shù) width：要清除的矩形的寬度，以像素計。

參數(shù) height：要清除的矩形的高度，以像素計。

小技巧：

當(dāng) x = 0，y = 0，width = canvas.width，height = canvas.height 時，則可以清除畫布上的矩形

2）示例：

1）參數(shù)說明：

參數(shù) x：圓中心的 x 坐標(biāo)。

參數(shù) y：圓中心的 y 坐標(biāo)。

參數(shù) r：圓的半徑。

參數(shù) sAngle：起始角弧度（圓的三點鐘位置是0度）。

參數(shù) eAngle：結(jié)束角弧度（圓的三點鐘位置是0度）。

參數(shù) counterclockwise：規(guī)定逆時針還是順時針繪圖。f'alse = 順時針，true = 逆時針。

2） 角度和弧度的關(guān)系：角度/弧度 = 180/pi

3）創(chuàng)建完圓弧后需使用 context.stroke(); 繪制創(chuàng)建的圓弧。

4）示例：繪制一個圓

5）示例：繪制圓上任意一點

圓上任意一點坐標(biāo)：x = ox + r*cos(弧度)，y = oy + r*cos(弧度)

ox：圓心的 x 坐標(biāo)。

oy：圓心的 y 坐標(biāo)。

r：圓的半徑。

2）設(shè)置字體水平對齊方式

2）設(shè)置字體垂直對齊方式

textBaseline 屬性在不同的瀏覽器上效果不同，特別是使用 "hanging" 或 "ideographic" 時。

3）設(shè)置文字陰影效果

1）參數(shù)說明：

參數(shù) text：文本內(nèi)容

參數(shù) x：開始繪制文本的 x 坐標(biāo)位置（相對于畫布）。

參數(shù) y：開始繪制文本的 y 坐標(biāo)位置（相對于畫布）。

2）默認(rèn)的填充顏色是黑色?？梢允褂?fillStyle 屬性來設(shè)置用于填充繪圖的顏色、漸變或模式。

3）示例：

1）參數(shù)說明：

參數(shù) text：文本內(nèi)容

參數(shù) x：開始繪制文本的 x 坐標(biāo)位置（相對于畫布）。

參數(shù) y：開始繪制文本的 y 坐標(biāo)位置（相對于畫布）。

2）默認(rèn)的筆觸顏色是黑色?？梢允褂?strokeStyle 屬性來設(shè)置筆觸的顏色、漸變或模式。

3）示例：

1）參數(shù)說明：

參數(shù) img：規(guī)定要使用的圖像。

參數(shù) x：在畫布上放置圖像的 x 坐標(biāo)位置。

參數(shù) y：在畫布上放置圖像的 y 坐標(biāo)位置。

2）當(dāng)圖像的大小超出畫布的大小時，超出的部分將不會被顯示出來。

3）示例：

1）參數(shù)說明：

參數(shù) img：規(guī)定要使用的圖像。

參數(shù) x：在畫布上放置圖像的 x 坐標(biāo)位置。

參數(shù) y：在畫布上放置圖像的 y 坐標(biāo)位置。

參數(shù) width：要使用的圖像的寬度（伸展或縮小圖像）。

參數(shù) height：要使用的圖像的高度（伸展或縮小圖像）。

2）因保持 width/height = img.width/img.height，否則繪制后的圖片會失幀。

3）示例：

1）參數(shù)說明：

參數(shù) img：規(guī)定要使用的圖像。

參數(shù) sx：從圖像的 sx 坐標(biāo)位置開始剪切。

參數(shù) sy：從圖像的 sy 坐標(biāo)位置開始剪切。

參數(shù) swidth：剪切的寬度。

參數(shù) sheight：剪切的高度。

參數(shù) x：在畫布上放置圖像的 x 坐標(biāo)位置。

參數(shù) y：在畫布上放置圖像的 y 坐標(biāo)位置。

參數(shù) width：要使用的圖像的寬度（伸展或縮小圖像）。

參數(shù) height：要使用的圖像的高度（伸展或縮小圖像）。

2）因保持 width/height = swidth/sheight，否則繪制后的圖片會失幀。

3）示例：

stop：介于 0.0 與 1.0 之間的值，表示漸變中開始(0.0)與結(jié)束(1.0)之間的位置。

color：顏色。

示例：

HTML5中Canvas的事件處理介紹

DOM是Web前端領(lǐng)域非常重要的組成部分，不僅在處理HTML元素時會用到DOM，圖形編程也同樣會用到。比如SVG繪圖，各種圖形都是以DOM節(jié)點的形式插入到頁面中，這就意味著可以使用DOM方法對圖形進行操作。比如有一個 元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而這種DOM處理方法在HTML5的Canvas里不再適用，Canvas使用的是另外一套機制，無論在Canvas上繪制多少圖形，Canvas都是一個整體，圖形本身實際都是Canvas的一部分，不可單獨獲取，所以也就無法直接給某個圖形增加JavaScript事件。

Canvas的限制

在Canvas里，所有圖形都繪制在幀上，繪制方法不會將繪制好的圖形元素作為一個返回值輸出，js也無法獲取到已經(jīng)繪制好的圖形元素。比如：

代碼如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

theRect = ctx.rect(10, 10, 100, 100);

ctx.stroke();

console.log(theRect); //undefined

這段代碼在canvas標(biāo)簽里繪制了一個矩形，首先可以看到繪制圖形的rect方法沒有返回值。如果打開瀏覽器的開發(fā)者工具，還可以看到canvas標(biāo)簽內(nèi)部沒有增加任何內(nèi)容，而在js里獲取到的canvas元素以及當(dāng)前的上下文，也都沒有任何表示新增圖形的內(nèi)容。

所以，前端常用的dom方法在canvas里是不適用的。比如點擊上面Canvas里的矩形，實際點擊的是整個Canvas元素。

給Canvas元素綁定事件

由于事件只能達到Canvas元素這一層，所以，如果想進一步深入，識別點擊發(fā)生在Canvas內(nèi)部的`哪一個圖形上，就需要增加代碼來進行處理?；舅悸肥牵航oCanvas元素綁定事件，當(dāng)事件發(fā)生時，檢查事件對象的位置，然后檢查哪些圖形覆蓋了該位置。比如上面的例子里畫過一個矩形，該矩形覆蓋x軸10-110、y軸10-110的范圍。只要鼠標(biāo)點擊在這個范圍里，就可以視為點擊了該矩形，也就可以手動觸發(fā)矩形需要處理的點擊事件。思路其實比較簡單，但是實現(xiàn)起來還是稍微有點復(fù)雜。不僅要考慮這個判斷過程的效率，有些地方還需要重新判斷事件類型，設(shè)置要重新定義一個Canvas內(nèi)部的捕獲和冒泡機制。

首先要做的，是給Canvas元素綁定事件，比如Canvas內(nèi)部某個圖形要綁定點擊事件，就需要通過Canvas元素代理該事件：

代碼如下:

cvs = document.getElementById('mycanvas');

cvs.addEventListener('click', function(e){

//...

}, false);

接下來需要判斷事件對象發(fā)生的位置，事件對象e的layerX和layerY屬性表示Canvas內(nèi)部坐標(biāo)系中的坐標(biāo)。但是這個屬性O(shè)pera不支持，Safari也打算移除，所以要做一些兼容寫法：

代碼如下:

function getEventPosition(ev){

var x, y;

if (ev.layerX || ev.layerX == 0) {

x = ev.layerX;

y = ev.layerY;

} else if (ev.offsetX || ev.offsetX == 0) { // Opera

x = ev.offsetX;

y = ev.offsetY;

}

return {x: x, y: y};

}

//注：使用上面這個函數(shù)，需要給Canvas元素的position設(shè)為absolute。

現(xiàn)在有了事件對象的坐標(biāo)位置，下面就要判斷Canvas里的圖形，有哪些覆蓋了這個坐標(biāo)。

isPointInPath方法

Canvas的isPointInPath方法可以判斷當(dāng)前上下文的圖形是否覆蓋了某個坐標(biāo)，比如：

代碼如下:

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

ctx.rect(10, 10, 100, 100);

ctx.stroke();

ctx.isPointInPath(50, 50); //true

ctx.isPointInPath(5, 5); //false

接下來增加一個事件判斷，就可以判斷一個點擊事件是否發(fā)生在矩形上：

代碼如下:

cvs.addEventListener('click', function(e){

p = getEventPosition(e);

if(ctx.isPointInPath(p.x, p.y)){

//點擊了矩形

}

}, false);

以上就是處理Canvas事件的基本方法，但是上面的代碼還有局限，由于isPointInPath方法僅判斷當(dāng)前上下文環(huán)境中的路徑，所以當(dāng)Canvas里已經(jīng)繪制了多個圖形時，僅能以最后一個圖形的上下文環(huán)境來判斷事件，比如：

代碼如下:

分享文章：canvashtml5,canvas h5
本文鏈接：http://aaarwkj.com/article36/dssjopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、電子商務(wù)、網(wǎng)站導(dǎo)航、服務(wù)器托管、網(wǎng)站排名、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)