整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
文為兄弟連云課堂《HTML5教程canvas學(xué)習(xí)：線條知識總結(jié)》學(xué)習(xí)筆記 訂閱走一波。
html5 SVG動畫&路徑
SVG動畫可以使用<animate>元素創(chuàng)建
實例:
創(chuàng)建一個矩形,將在3秒內(nèi)更改其位置,然后重復(fù)動畫兩次
<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:指定哪個屬性需要產(chǎn)生動畫效果
from:指定屬性的起始值
to:指定屬性的結(jié)束值
dur:指定動畫運行的時間(持續(xù)時間)
fill="frezee|remove":指定動畫播放完畢后是停留在播放的終點還是回到起始位置
repeatCount:指定動畫的重復(fù)播放次數(shù)
在上面的例子中,矩形在3s內(nèi)將其x屬性從0更改為300
●要無限重復(fù)動畫,請使用值"indefinite"作為repeatCount屬性
<path>元素用于定義一個路徑
下面的命令可用于路徑數(shù)據(jù):
●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,到達(dá)位置75 200,然后從那里開始到225 200,最后150 0關(guān)閉路徑
二 html5 Canvas
html5<canvas>元素用于圖形的繪制,通過腳本(通常是JavaScript)來完成
<canvas>標(biāo)簽只是圖形容器,你必須使用腳本來繪制圖形
getContext()方法可返回一個對象,該方法提供了用于在畫布上繪畫的方法和屬性.
你可以通過多種方法使用canvas繪制路徑,盒,圓,字符以及添加圖像
<canvas>元素定義如下:
<canvas id"myCanvas" width="200" height="100">
</canvas>
<canvas>標(biāo)簽通常需要指定一個id屬性(腳本中經(jīng)常使用),width和height屬性定義的畫布的大小
了解和使用Canvas需要基本了解JavaScript的基本知識
canvas是一個二維坐標(biāo)
canvas的左上角坐標(biāo)為(0,0)
x坐標(biāo)向右增加
y坐標(biāo)向著畫布底部增加
Canvas-路徑
在Canvas上畫線,我們將使用以下兩種方法:
●moveTo(x,y)定義線條開始坐標(biāo)
●lineTo(x,y)定義線條結(jié)束坐標(biāo)
在canvas中繪制圓形,我們將使用以下方法:
●arc(x,y,start,stop)
Canvas-文本
使用canvas繪制文本,重要的屬性和方法如下:
●font-定義字體
●fillText(text,x,y)-在canvas上繪制實心的文本
●strokeText(text,x,y)-在canvas上繪制空心的文本
Canvas-漸變
漸變可以填充在矩形,圓形,線條,文本等等,各種形狀可以自己定義不同的顏色
以下有兩種不同的方式來設(shè)置canvas漸變:
●creatLinearGradient(x,y,x1,y1)-創(chuàng)建線條漸變
●creatRadialGradient(x,y,r,x1,y1,r1)-創(chuàng)建一個徑向/圓漸變
當(dāng)我們使用漸變對象,必須使用兩種或兩種以上的停止顏色
addColorStop()方法指定顏色停止,參數(shù)使用坐標(biāo)描述,可以是0至1
使用漸變,設(shè)置fillStyle或strokeStyle的值為漸變,然后繪制形狀,如矩形,文本,或一條線
Canva-圖像
把一幅圖像放置在畫布上,使用以下方法:
●drawImage(image,x,y)
三 html5 SVG與Canvas的區(qū)別
SVG:
SVG是一種使用XML描述2D圖形的語言
SVG基于XML,這意味著SVG DOM中的每個元素都是可用的.你可以為某個元素附加JavaScript事件處理器
在SVG中,每個被繪制的圖形均被視為對象.如果SVG對象的屬性發(fā)生改變,那么瀏覽器能夠自動重現(xiàn)圖形
特點:
●不依賴分辨率
●支持事件處理器
●最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)
●復(fù)雜程度高會減慢渲染速度(任何過度使用DOM的應(yīng)用都不快)
●不適合游戲應(yīng)用
Canvas:
canvas通過JavaScript來繪制2D圖形
canvas可以逐像素進(jìn)行渲染的
在canvas中,一旦圖形被繪制出來,它就不會繼續(xù)得到瀏覽器的關(guān)注
如果其位置發(fā)生變化,那么整個場景也需要重新啟動,包括任何或許已被圖像覆蓋的對象
特點:
●依賴分辨率
●不支持事件處理器
●弱的文本渲染能力
●能夠以.png或.ipg格式保存結(jié)果圖像
●最適合圖像密集型的游戲,其中的許多對象都會被頻換重繪
lt;canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。
比如在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。
什么是 canvas?
HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
iphone
創(chuàng)建一個畫布（Canvas）
一個畫布在網(wǎng)頁中是一個矩形框，通過 <canvas> 元素來繪制。
注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容。
<canvas>簡單實例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 標(biāo)簽通常需要指定一個id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小。
提示:你可以在HTML頁面中使用多個 <canvas> 元素.
1.使用 style 屬性來添加邊框:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
2.使用 JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
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.然后，創(chuàng)建 context 對象：
var ctx=c.getContext("2d");
getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
下面的兩行代碼繪制一個紅色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
設(shè)置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認(rèn)設(shè)置是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當(dāng)前的填充方式。
iphone
Canvas 坐標(biāo)
canvas 是一個二維網(wǎng)格。
canvas 的左上角坐標(biāo)為 (0,0)
上面的 fillRect 方法擁有參數(shù) (0,0,150,75)。
意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
坐標(biāo)實例
如下圖所示，畫布的 X 和 Y 坐標(biāo)用于在畫布上對繪畫進(jìn)行定位。鼠標(biāo)移動的矩形框上，顯示定位坐標(biāo)。
Canvas - 路徑
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標(biāo)
lineTo(x,y) 定義線條結(jié)束坐標(biāo)
繪制線條我們必須使用到 "ink" 的方法，就像stroke().
定義開始坐標(biāo)(0,0), 和結(jié)束坐標(biāo) (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);
大家有沒有學(xué)會呢？沒學(xué)會的話記得私信小編"011"哦~
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
