前端必會的 HTML5 Canvas標簽講解

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

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

什么是 canvas?

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

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

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

iphone

創建一個畫布（Canvas）

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

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

<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) 方法定義了矩形當前的填充方式。

iphone

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"哦~

教程

1. 繪制靜態粒子圖形效果

2. 添加靜態粒子動畫效果

3. 添加粒子碰撞動畫效果

4. 添加粒子四面碰撞效果

基礎要求：

1. 了解基礎HTML標簽，例如canvas標簽

2. 了解Javascript的基礎知識

第一步：生成靜態粒子圖形

生成靜態粒子圖形，我們將會使用到Canvas的如下相關方法：

context.fillRect(x, y, width, height);

context.arc(x, y, r, sAngle, eAngle, counterclockwise);

其中，使用fillRect方法生成了整個動畫場景，布滿了畫布全部區域，再使用arc方法來生成一個圓形，arc方法本身用來生成圓弧，但是如果生成一個360度的圓弧的話，就自然生成了圓形，完整代碼如下：

var canvas = document.getElementById('gbcanvas'),

context = canvas.getContext('2d');

var posX = 30, //定義圓心X坐標

posY = 30, //定義圓心Y坐標

particleRadius = 30; //定義半徑

context.fillStyle = '#E4E4E4';

context.fillRect(0,0,canvas.width,canvas.height); //生成畫布背景色

context.beginPath;

context.fillStyle = '#dd4814';

context.arc(posX, posY, particleRadius, 0 , Math.PI*2, true);

context.closePath;

context.fill;

在線演示&調試地址

http://www.igeekbar.com/igclass/code/5392196c-400d-466c-b0cb-647bbc3469cc.htm

第二步：生成粒子運行效果

動畫效果原理：

HTML5 畫布動畫生成原理，本質來說實現方式就是每隔固定時間段重新繪制畫布內的圖形，如下是代碼：

var canvas = document.getElementById('gbcanvas'),

context = canvas.getContext('2d'),

posX = 30,

posY = 30,

particleRadius = 30;

//定義setInterval來隔特定時間生成粒子，如下

setInterval(function{

//為了能夠生成粒子移動效果，我們需要在每次繪制粒子之前清楚界面里的繪圖

context.fillStyle = '#E4E4E4';

context.fillRect(0,0,canvas.width,canvas.height); //使用背景色填充

posX+=2;

posY+=1;

context.arc(posX, posY, particleRadius, 0, Math.PI*2, true);

}, 10);

以上代碼我們使用fillRect方法來先將整個背景色重新填充，再使用arc方法重新繪制圓形，來生成移動的效果

在線演示&調試地址

http://www.igeekbar.com/igclass/code/d2ff678f-23f1-4cab-9eba-9898d4393017.htm

第三步：生成粒子碰撞效果

使用HTML5畫布生成一個粒子碰撞地面效果，并且同時添加相關重力加速度效果。

首先定義粒子x軸和y軸的運動速度及重力加速度，如下：

speedX = 10, //定義一個X軸方向的速度

speedY = 10, //定義一個Y軸方向的速度

gravity = 1; //定義一個重力的參數，即重力加速度

然后，設置粒子運動速度，即每次繪制粒子圓心坐標的變化，如下：

//以下代碼設置運動速度

posX+=speedX;

posY+=speedY;

同時，保證Y軸擁有一個加速度效果，如下：

//添加重力加速度效果

speedY+=gravity;

最后，我們添加一個地面碰撞效果，判斷當粒子的中心Y軸低于canvas的高度減去粒子半徑，即粒子部分區域低于畫布最低端的時候，重新定義粒子的位置，如下：

//接下來我們添加地面反彈效果，只需要判斷當粒子運動到近畫布底端的時候，粒子Y軸坐標反向

if(posY > canvas.height - particleRadius){

speedY*=-0.5; //這里設置粒子速度為負值，修改此數值可以修改粒子Y軸運動速度損耗量

speedX*=0.5; //這里設置粒子X軸速度的損耗量

posY = canvas.height - particleRadius; //這里當粒子低于畫布最低端的時候，設置保證其不消失

}

在線演示&調試地址

http://www.igeekbar.com/igclass/code/8a3cfeb7-b052-4bf7-b3b1-8ec4e59584af.htm

第四步：生成四面碰壁粒子效果

上面我們生成了粒子碰撞地面效果，本節我們添加粒子四面碰壁效果，基本代碼如下：

//判斷粒子位于畫布右側可顯示區域外

if(posX > canvas.width - particleRadius){

speedX*=-1;

posX = canvas.width - particleRadius;

}

//判斷粒子位于畫布左側可顯示區域外

if(posX < particleRadius){

speedX*=-1;

posX = particleRadius;

}

//最后添加頂端的反彈效果

if(posY < particleRadius){

speedY*=-1;

posY = particleRadius;

}

大家可以看到，代碼基本和碰撞地面效果類似，只不過判斷粒子中心所處的坐標位置來修改粒子運動的方向。

在線演示&調試地址

http://www.igeekbar.com/igclass/code/87784219-f527-4f52-bfb2-62cd82bbc07d.htm

Done！以上就是幾個HTML5實現粒子物理碰撞的例子，希望大家能夠覺得有用，有任何問題，請給我留言哈

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格式保存結果圖像

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

在線咨詢

上一篇：一分鐘學前端-02_HTML常用元素
下一篇：html文件如何轉成word？這幾個步驟看完你就懂了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端必會的 HTML5 Canvas標簽講解

您的項目需求