文為兄弟連云課堂《HTML5教程canvas學習：線條知識總結》學習筆記 訂閱走一波。

html5 SVG動畫&路徑

SVG動畫可以使用<animate>元素創建

實例:

創建一個矩形,將在3秒內更改其位置,然后重復動畫兩次

<svg width="1000" height="250">

<rect width="150" height="150" fill="orange">

<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2" />

</rect>

</svg>

attributeName:指定哪個屬性需要產生動畫效果

from:指定屬性的起始值

to:指定屬性的結束值

dur:指定動畫運行的時間(持續時間)

fill="frezee|remove":指定動畫播放完畢后是停留在播放的終點還是回到起始位置

repeatCount:指定動畫的重復播放次數

在上面的例子中,矩形在3s內將其x屬性從0更改為300

●要無限重復動畫,請使用值"indefinite"作為repeatCount屬性

<path>元素用于定義一個路徑

下面的命令可用于路徑數據:

●M=moveto

●L=lineto

●H=horizontal lineto

●V=vertical lineto

●C=curveto

●S=smooth curveto

●Q=quadratic Bezier curve

●T=smooth quadratic Bezier curveto

●A=elliptical Arc

●Z=closepath

注意:以上所有命令均允許小寫字母.大寫字母表示絕對定位,小寫字母表示相對定位

實例:

<svg width="500" height="500">

<path d="M50 0 L75 200 L225 200 Z"/>

</svg>

上面的例子中定義了一條路徑,它開始于150 0,到達位置75 200,然后從那里開始到225 200,最后150 0關閉路徑

二 html5 Canvas

html5<canvas>元素用于圖形的繪制,通過腳本(通常是JavaScript)來完成

<canvas>標簽只是圖形容器,你必須使用腳本來繪制圖形

getContext()方法可返回一個對象,該方法提供了用于在畫布上繪畫的方法和屬性.

你可以通過多種方法使用canvas繪制路徑,盒,圓,字符以及添加圖像

<canvas>元素定義如下:

<canvas id"myCanvas" width="200" height="100">

</canvas>

<canvas>標簽通常需要指定一個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)-創建線條漸變

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

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

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

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

Canva-圖像

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

●drawImage(image,x,y)

三 html5 SVG與Canvas的區別

SVG:

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

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

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

特點:

●不依賴分辨率

●支持事件處理器

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

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

●不適合游戲應用

Canvas:

canvas通過JavaScript來繪制2D圖形

canvas可以逐像素進行渲染的

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

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

特點:

●依賴分辨率

●不支持事件處理器

●弱的文本渲染能力

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

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

lt;canvas> 標簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。

比如在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

什么是 canvas?

HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.

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

你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。

創建一個畫布（Canvas）

一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制。

注意: 默認情況下 <canvas> 元素沒有邊框和內容。

<canvas>簡單實例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

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

提示:你可以在HTML頁面中使用多個 <canvas> 元素.

1.使用 style 屬性來添加邊框:

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

2.使用 JavaScript 來繪制圖像

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

實例解析:

3.首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

4.然后，創建 context 對象：

var ctx=c.getContext("2d");

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪制一個紅色的矩形：

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

Canvas 坐標

canvas 是一個二維網格。

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

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

坐標實例

如下圖所示，畫布的 X 和 Y 坐標用于在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位坐標。

Canvas - 路徑

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

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

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

繪制線條我們必須使用到 "ink" 的方法，就像stroke().

定義開始坐標(0,0), 和結束坐標 (200,100)。然后使用 stroke() 方法來繪制線條:

Canvas - 文本

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

font - 定義字體

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

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

使用 fillText():

使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）：

JavaScript:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

大家有沒有學會呢？沒學會的話記得私信小編"011"哦~