怎樣在html5中添加canvas標簽

canvas 標簽是 HTML 5 中的新標簽。

定義和用法

canvas 標簽定義圖形，比如圖表和其他圖像。

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

實例

通過 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)頁上繪制圖像。

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

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

html5 canvas繪圖有什么用

W3school上面是這么介紹的：

HTML5 canvas 標簽用于繪制圖像（通過腳本，通常是 JavaScript）。不過，canvas 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。

更多信息

HTML5 - Canvas

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

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

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

示例：

示例：

示例：

示例：

示例：

示例：

示例：

1）參數(shù)說明：

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

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

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

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

2） 注意事項：

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

3）示例：

1）參數(shù)說明：

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

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

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

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

2）默認的填充顏色是黑色。可以使用 fillStyle 屬性來設置用于填充繪圖的顏色、漸變或模式。

3）示例：

1）參數(shù)說明：

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

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

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

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

2）筆觸的默認顏色是黑色。

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

4）示例：

1）參數(shù)說明：

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

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

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

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

小技巧：

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

2）示例：

1）參數(shù)說明：

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

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

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

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

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

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

2） 角度和弧度的關系：角度/弧度 = 180/pi

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

4）示例：繪制一個圓

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

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

ox：圓心的 x 坐標。

oy：圓心的 y 坐標。

r：圓的半徑。

2）設置字體水平對齊方式

2）設置字體垂直對齊方式

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

3）設置文字陰影效果

1）參數(shù)說明：

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

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

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

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

3）示例：

1）參數(shù)說明：

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

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

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

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

3）示例：

1）參數(shù)說明：

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

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

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

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

3）示例：

1）參數(shù)說明：

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

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

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

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

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

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

3）示例：

1）參數(shù)說明：

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

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

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

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

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

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

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

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

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

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

3）示例：

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

color：顏色。

示例：