整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
lt;canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。
比如在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。
什么是 canvas?
HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
iphone
創(chuàng)建一個畫布（Canvas）
一個畫布在網(wǎng)頁中是一個矩形框，通過 <canvas> 元素來繪制。
注意: 默認情況下 <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 默認設(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)用于在畫布上對繪畫進行定位。鼠標(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"哦~
教程
目錄：
1. 繪制靜態(tài)粒子圖形效果
2. 添加靜態(tài)粒子動畫效果
3. 添加粒子碰撞動畫效果
4. 添加粒子四面碰撞效果
基礎(chǔ)要求：
1. 了解基礎(chǔ)HTML標(biāo)簽，例如canvas標(biāo)簽
2. 了解Javascript的基礎(chǔ)知識
第一步： 生成靜態(tài)粒子圖形
生成靜態(tài)粒子圖形，我們將會使用到Canvas的如下相關(guān)方法：
context.fillRect(x, y, width, height);
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
其中，使用fillRect方法生成了整個動畫場景，布滿了畫布全部區(qū)域，再使用arc方法來生成一個圓形，arc方法本身用來生成圓弧，但是如果生成一個360度的圓弧的話，就自然生成了圓形，完整代碼如下：
var canvas = document.getElementById('gbcanvas'),
context = canvas.getContext('2d');
var posX = 30, //定義圓心X坐標(biāo)
posY = 30, //定義圓心Y坐標(biāo)
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;
在線演示&調(diào)試地址
http://www.igeekbar.com/igclass/code/5392196c-400d-466c-b0cb-647bbc3469cc.htm
第二步： 生成粒子運行效果
動畫效果原理：
HTML5 畫布動畫生成原理，本質(zhì)來說實現(xiàn)方式就是每隔固定時間段重新繪制畫布內(nèi)的圖形，如下是代碼：
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方法重新繪制圓形，來生成移動的效果
在線演示&調(diào)試地址
http://www.igeekbar.com/igclass/code/d2ff678f-23f1-4cab-9eba-9898d4393017.htm
第三步： 生成粒子碰撞效果
使用HTML5畫布生成一個粒子碰撞地面效果，并且同時添加相關(guān)重力加速度效果。
首先定義粒子x軸和y軸的運動速度及重力加速度，如下：
speedX = 10, //定義一個X軸方向的速度
speedY = 10, //定義一個Y軸方向的速度
gravity = 1; //定義一個重力的參數(shù)，即重力加速度
然后，設(shè)置粒子運動速度，即每次繪制粒子圓心坐標(biāo)的變化，如下：
//以下代碼設(shè)置運動速度
posX+=speedX;
posY+=speedY;
同時，保證Y軸擁有一個加速度效果，如下：
//添加重力加速度效果
speedY+=gravity;
最后，我們添加一個地面碰撞效果，判斷當(dāng)粒子的中心Y軸低于canvas的高度減去粒子半徑，即粒子部分區(qū)域低于畫布最低端的時候，重新定義粒子的位置，如下：
//接下來我們添加地面反彈效果，只需要判斷當(dāng)粒子運動到近畫布底端的時候，粒子Y軸坐標(biāo)反向
if(posY > canvas.height - particleRadius){
speedY*=-0.5; //這里設(shè)置粒子速度為負值，修改此數(shù)值可以修改粒子Y軸運動速度損耗量
speedX*=0.5; //這里設(shè)置粒子X軸速度的損耗量
posY = canvas.height - particleRadius; //這里當(dāng)粒子低于畫布最低端的時候，設(shè)置保證其不消失
}
在線演示&調(diào)試地址
http://www.igeekbar.com/igclass/code/8a3cfeb7-b052-4bf7-b3b1-8ec4e59584af.htm
第四步： 生成四面碰壁粒子效果
上面我們生成了粒子碰撞地面效果，本節(jié)我們添加粒子四面碰壁效果，基本代碼如下：
//判斷粒子位于畫布右側(cè)可顯示區(qū)域外
if(posX > canvas.width - particleRadius){
speedX*=-1;
posX = canvas.width - particleRadius;
}
//判斷粒子位于畫布左側(cè)可顯示區(qū)域外
if(posX < particleRadius){
speedX*=-1;
posX = particleRadius;
}
//最后添加頂端的反彈效果
if(posY < particleRadius){
speedY*=-1;
posY = particleRadius;
}
大家可以看到，代碼基本和碰撞地面效果類似，只不過判斷粒子中心所處的坐標(biāo)位置來修改粒子運動的方向。
在線演示&調(diào)試地址
http://www.igeekbar.com/igclass/code/87784219-f527-4f52-bfb2-62cd82bbc07d.htm
Done！以上就是幾個HTML5實現(xiàn)粒子物理碰撞的例子， 希望大家能夠覺得有用， 有任何問題，請給我留言哈
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,到達位置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可以逐像素進行渲染的
在canvas中,一旦圖形被繪制出來,它就不會繼續(xù)得到瀏覽器的關(guān)注
如果其位置發(fā)生變化,那么整個場景也需要重新啟動,包括任何或許已被圖像覆蓋的對象
特點:
●依賴分辨率
●不支持事件處理器
●弱的文本渲染能力
●能夠以.png或.ipg格式保存結(jié)果圖像
●最適合圖像密集型的游戲,其中的許多對象都會被頻換重繪
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
