整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          前端必會的 HTML5 Canvas標(biāo)簽講解

          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é)果圖像

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


          主站蜘蛛池模板: 一区二区三区四区电影视频在线观看| 最新欧美精品一区二区三区| 久久久精品日本一区二区三区| 国产一区二区三区亚洲综合| 好吊妞视频一区二区| 国产精品第一区揄拍无码| 波多野结衣一区在线| 亚洲一区二区三区香蕉| 色窝窝无码一区二区三区色欲| 精品人妻中文av一区二区三区| 日本一区二区三区免费高清| 无码少妇一区二区浪潮av| 国产suv精品一区二区33| 无码中文人妻在线一区| 中文字幕久久久久一区| 无码福利一区二区三区| av无码精品一区二区三区四区| 午夜福利一区二区三区在线观看| 国产一区二区不卡老阿姨| 亚洲国产一区视频| 在线日产精品一区| 成人国产一区二区三区| 亚洲大尺度无码无码专线一区 | 中文字幕av人妻少妇一区二区 | 国产乱码一区二区三区四| 一区在线免费观看| 亚洲乱码一区二区三区国产精品| 一区二区精品久久| 一区二区三区视频| 亚洲爆乳无码一区二区三区| 精品视频午夜一区二区| 亚洲福利一区二区| 夜夜嗨AV一区二区三区| 日韩一区二区在线免费观看| 亚洲蜜芽在线精品一区| 国产在线精品一区二区夜色| 国产日韩精品一区二区三区 | 香蕉视频一区二区| 无码一区二区三区中文字幕| 国产精品免费一区二区三区四区| 午夜精品一区二区三区在线视|