canvas 標(biāo)簽是 HTML 5 中的新標(biāo)簽。
成都服務(wù)器托管，成都創(chuàng)新互聯(lián)提供包括服務(wù)器租用、BGP機(jī)房服務(wù)器托管、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、申請(qǐng)域名等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：18982081108
定義和用法
canvas 標(biāo)簽定義圖形，比如圖表和其他圖像。
canvas 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
實(shí)例
通過 canvas 元素來顯示一個(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 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。
畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
W3school上面是這么介紹的：
HTML5 canvas 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。不過，canvas 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實(shí)際的繪圖任務(wù)。getContext() 方法可返回一個(gè)對(duì)象，該對(duì)象提供了用于在畫布上繪圖的方法和屬性。
更多信息
HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。
在使用 canvas 繪制圖像時(shí)，canvas 畫布左上角的坐標(biāo)為(0, 0)
注意：canvas 畫布大小不可通過 css 來改變，只能通過屬性方式設(shè)置，否則可能出現(xiàn)失幀的情況（當(dāng)使用 css 方式改變 canvas 畫布大小時(shí)，只是 cavas 標(biāo)簽的大小改變了，正真的繪圖區(qū)域大小并沒有改變，所以出現(xiàn)了失幀的情況）。
示例：
示例：
示例：
示例：
示例：
示例：
示例：
1）參數(shù)說明：
參數(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)建了矩形，并沒有繪制出來。因此，創(chuàng)建完成后需使用 context.stroke(); 來繪制。
3）示例：
1）參數(shù)說明：
參數(shù) x：矩形左上角的 x 坐標(biāo)。
參數(shù) y：矩形左上角的 y 坐標(biāo)。
參數(shù) width：矩形的寬度，以像素計(jì)。
參數(shù) height：矩形的高度，以像素計(jì)。
2）默認(rèn)的填充顏色是黑色?？梢允褂?fillStyle 屬性來設(shè)置用于填充繪圖的顏色、漸變或模式。
3）示例：
1）參數(shù)說明：
參數(shù) x：矩形左上角的 x 坐標(biāo)。
參數(shù) y：矩形左上角的 y 坐標(biāo)。
參數(shù) width：矩形的寬度，以像素計(jì)。
參數(shù) height：矩形的高度，以像素計(jì)。
2）筆觸的默認(rèn)顏色是黑色。
3）可以使用 strokeStyle 屬性來設(shè)置筆觸的顏色、漸變或模式。
4）示例：
1）參數(shù)說明：
參數(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í)，則可以清除畫布上的矩形
2）示例：
1）參數(shù)說明：
參數(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ù)說明：
參數(shù) text：文本內(nèi)容
參數(shù) x：開始繪制文本的 x 坐標(biāo)位置（相對(duì)于畫布）。
參數(shù) y：開始繪制文本的 y 坐標(biāo)位置（相對(duì)于畫布）。
2）默認(rèn)的填充顏色是黑色。可以使用 fillStyle 屬性來設(shè)置用于填充繪圖的顏色、漸變或模式。
3）示例：
1）參數(shù)說明：
參數(shù) text：文本內(nèi)容
參數(shù) x：開始繪制文本的 x 坐標(biāo)位置（相對(duì)于畫布）。
參數(shù) y：開始繪制文本的 y 坐標(biāo)位置（相對(duì)于畫布）。
2）默認(rèn)的筆觸顏色是黑色?？梢允褂?strokeStyle 屬性來設(shè)置筆觸的顏色、漸變或模式。
3）示例：
1）參數(shù)說明：
參數(shù) img：規(guī)定要使用的圖像。
參數(shù) x：在畫布上放置圖像的 x 坐標(biāo)位置。
參數(shù) y：在畫布上放置圖像的 y 坐標(biāo)位置。
2）當(dāng)圖像的大小超出畫布的大小時(shí)，超出的部分將不會(huì)被顯示出來。
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，否則繪制后的圖片會(huì)失幀。
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，否則繪制后的圖片會(huì)失幀。
3）示例：
stop：介于 0.0 與 1.0 之間的值，表示漸變中開始(0.0)與結(jié)束(1.0)之間的位置。
color：顏色。
示例：
重慶分公司
重慶分公司
