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

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

定義和用法

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

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

實(shí)例

通過(guò) canvas 元素來(lái)顯示一個(gè)紅色的矩形：

!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)頁(yè)上繪制圖像。

畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

html5 canvas繪圖有什么用

W3school上面是這么介紹的：

HTML5 canvas 標(biāo)簽用于繪制圖像（通過(guò)腳本，通常是 JavaScript）。不過(guò)，canvas 元素本身并沒(méi)有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來(lái)完成實(shí)際的繪圖任務(wù)。getContext() 方法可返回一個(gè)對(duì)象，該對(duì)象提供了用于在畫(huà)布上繪圖的方法和屬性。

更多信息

HTML5 - Canvas

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

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

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

示例：

示例：

示例：

示例：

示例：

示例：

示例：

1）參數(shù)說(shuō)明：

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

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

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

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

2） 注意事項(xiàng)：

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

3）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

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

3）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

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

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

4）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

小技巧：

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

2）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

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

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

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

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

4）示例：繪制一個(gè)圓

5）示例：繪制圓上任意一點(diǎn)

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

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

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

r：圓的半徑。

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

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

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

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

1）參數(shù)說(shuō)明：

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

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

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

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

3）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

3）示例：

1）參數(shù)說(shuō)明：

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

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

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

2）當(dāng)圖像的大小超出畫(huà)布的大小時(shí)，超出的部分將不會(huì)被顯示出來(lái)。

3）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

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

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

3）示例：

1）參數(shù)說(shuō)明：

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

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

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

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

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

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

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

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

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

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

3）示例：

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

color：顏色。

示例：