標簽通常需要指定一個id屬性(腳本中經常使用),width和height屬性定義的畫布的大小

了解和使用Canvas需要基本了解JavaScript的基本知識

canvas是一個二維坐標

canvas的左上角坐標為(0,0)

x坐標向右增加

y坐標向著畫布底部增加

Canvas-路徑

在Canvas上畫線,我們將使用以下兩種方法:

●moveTo(x,y)定義線條開始坐標

●lineTo(x,y)定義線條結束坐標

在canvas中繪制圓形,我們將使用以下方法:

●arc(x,y,start,stop)

Canvas-文本

使用canvas繪制文本,重要的屬性和方法如下:

●font-定義字體

●fillText(text,x,y)-在canvas上繪制實心的文本

●strokeText(text,x,y)-在canvas上繪制空心的文本

Canvas-漸變

漸變可以填充在矩形,圓形,線條,文本等等,各種形狀可以自己定義不同的顏色

以下有兩種不同的方式來設置canvas漸變:

●creatLinearGradient(x,y,x1,y1)-創(chuàng)建線條漸變

●creatRadialGradient(x,y,r,x1,y1,r1)-創(chuàng)建一個徑向/圓漸變

當我們使用漸變對象,必須使用兩種或兩種以上的停止顏色

addColorStop()方法指定顏色停止,參數使用坐標描述,可以是0至1

使用漸變,設置fillStyle或strokeStyle的值為漸變,然后繪制形狀,如矩形,文本,或一條線

Canva-圖像

把一幅圖像放置在畫布上,使用以下方法:

●drawImage(image,x,y)

三 html5 SVG與Canvas的區(qū)別

SVG:

SVG是一種使用XML描述2D圖形的語言

SVG基于XML,這意味著SVG DOM中的每個元素都是可用的.你可以為某個元素附加JavaScript事件處理器

在SVG中,每個被繪制的圖形均被視為對象.如果SVG對象的屬性發(fā)生改變,那么瀏覽器能夠自動重現圖形

特點:

●不依賴分辨率

●支持事件處理器

●最適合帶有大型渲染區(qū)域的應用程序(比如谷歌地圖)

●復雜程度高會減慢渲染速度(任何過度使用DOM的應用都不快)

●不適合游戲應用

Canvas:

canvas通過JavaScript來繪制2D圖形

canvas可以逐像素進行渲染的

在canvas中,一旦圖形被繪制出來,它就不會繼續(xù)得到瀏覽器的關注

如果其位置發(fā)生變化,那么整個場景也需要重新啟動,包括任何或許已被圖像覆蓋的對象

特點:

●依賴分辨率

●不支持事件處理器

●弱的文本渲染能力

●能夠以.png或.ipg格式保存結果圖像

●最適合圖像密集型的游戲,其中的許多對象都會被頻換重繪

總結

以上是生活随笔為你收集整理的3天html自学教程,html自学教程（八）html5基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。