html5怎樣實現(xiàn)直線動畫效果

您好，希望以下回答能幫助您

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)和四川樂山服務(wù)器托管的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗和案例。

對!html5 的動畫效果 是用(js)jQuery+css3做的!html5繪圖是用HTML5 Canvas 畫圖標簽 加上API做的!

如您還有疑問可繼續(xù)追問。

HTML5用哪個方法繪制

canvas繪圖通過屬于 canvas 的 JavaScript 方法完成

針對不支持html5的IE瀏覽器

!--[if IE]

script type="text/javascript" src="excanvas.js"/script

![endif]--

提示：canvas的繪圖過程（即填充與描邊）是非常消耗資源的，如果想節(jié)省系統(tǒng)資源提高效率，最好是繪制好所有路徑，再一次性填充或描邊圖形。

canvas 方法

方法

用途

getContext(contextId) ? ?公開在 canvas 上繪圖需要的 API。惟一（當(dāng)前）可用的 contextID 是 2d。 ?

height ? ?設(shè)置 canvas 的高度。默認值是 150 像素。 ?

width ? ?設(shè)置 canvas 的寬度。默認值是 300 像素。 ?

createLinearGradient(x1,y1,x2,y2) ? ?創(chuàng)建一個線性漸變。起始坐標為 x1,y1，結(jié)束坐標為 x2,y2。 ?

createRadialGradient(x1,y1,r1,x2,y2,r2) ? ?創(chuàng)建一個放射狀漸變。圓圈的起始坐標是 x1,y1，半徑為 r1。圓圈的結(jié)束坐標為 x2,y2，半徑為 r2。 ?

addColorStop(offset, color) ? ?向一個漸變添加一個顏色停止。顏色停止（color stop） 是漸變中顏色更改發(fā)生的位置。offset 必須介于 0 到 1 之間。 ?

fillStyle ? ?設(shè)置用于填充一個區(qū)域的顏色 — 例如，fillStyle='rgb(255,0,0)'. ?

strokeStyle ? ?設(shè)置用于繪制一根直線的顏色 — 例如，strokeStyle='rgb(255,0,0)'. ?

fillRect(x,y,w,h) ? ?填充一個定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形。 ?

strokeRect(x,y,w,h) ? ?繪制一個定位于 x 和 y，寬度和高度分別為 w 和 h 的矩形的輪廓。 ?

moveTo(x,y) ? ?將繪圖位置移動到坐標 x,y。 ?

lineTo(x,y) ? ?從繪圖方法結(jié)束的最后位置到 x,y 繪制一條直線。 ?

1、繪制矩形：用到fillRect

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var canvas=document.getElementById("myCanvas"); ? //canvas 元素被設(shè)置為一個 JavaScript 變量

var myContext=canvas.getContext("2d"); ?//將getContext 應(yīng)用到 canvas 元素 ? ?myContext.fillStyle="#ff0000"; ? ? ? ?//16進制設(shè)置填充顏色 ? ?myContext.fillRect(30,30,300,300); ? ? ? ? //定義大小 ? ?myContext.fillStyle='rgb(0,255,0)'; ?//rgb設(shè)置填充顏色 ? ?myContext.fillRect(60,60,300,300);

myContext.fillStyle='rgba(255,0,0,0.5)'; ?//rgb+透明度設(shè)置填充顏色 ?myContext.fillRect(90,90,300,300);/script/body/html

2、線性漸變，用到createLinearGradient

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d'); ? ?var myGradient=myContext.createLinearGradient(30,30,300,300); ? //創(chuàng)建一個線性漸變 ? ?myGradient.addColorStop(0,"#ff0000"); ? ? ? //位置0和1之間，顏色值 ? ?myGradient.addColorStop(0.5,"#00FF00");

myGradient.addColorStop(1,"#ff00ff");

myContext.fillStyle=myGradient; ? ? ? ? ? ? //用線性漸變填充 ? ?myContext.fillRect(0,0,400,400);/script/body/html

3、放射性漸變，用到createRadialGradient

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"var myCanvas=document.getElementById('myCanvas'); ? ?var myContext=myCanvas.getContext('2d'); ? ?var myGradient=myContext.createRadialGradient(300,300,0,300,300,400); ?//6個參數(shù) ? ?myGradient.addColorStop("0","#ff0000");

myGradient.addColorStop("1","#00ff00");

myContext.fillStyle=myGradient;

myContext.fillRect(0,0,300,300);/script/body/html

4、繪制矩形，與填充的不同，這個是描邊效果

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.strokeStyle="#ff0000"; ? ? ? ? ? ?//設(shè)置筆觸純色 ? ?myContext.strokeRect(0,0,100,100);/script/body/html

(當(dāng)寬度為1px時，很明顯的出現(xiàn)了模糊的現(xiàn)象，解決方法是數(shù)值都加上0.5，具體原因就自己百度下吧)

5、漸變筆觸

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d'); ? ?var myGradient=myContext.createLinearGradient(0,0,100,0);

myGradient.addColorStop(0,"#ff0000");

myGradient.addColorStop(1,'#0000ff');

myContext.strokeStyle=myGradient; ? ? ? ? ? ?//設(shè)置漸變筆觸 ? ?myContext.lineWidth=5; ? ? ? ? ? ? ? ? ? ? ? ? //描邊寬度 ? ?myContext.strokeRect(0,0,100,100);/script/body/html

6、繪制圓，圓周長公式=2∏r

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.beginPath(); ? ? ? ? ? ? ? ? ? ? ?//開始一個新的繪制路徑 ? ?myContext.arc(100,75,50,0,2*Math.PI); ? ? //以坐標點(100,75)為圓心，起始角為0，繪制一個半徑為50px的圓形 ? ?myContext.stroke(); ? ? ? ? ? ? ? ? ? ? ? ? //按照指定的路徑繪制弧線/script/body/html

7、繪制圓形

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbodycanvas id="myCanvas" width="500" height="500" ?style="margin:100px 0 0 100px;"/canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.arc(100,100,50,0,2*Math.PI);

myContext.fillStyle="#ff0000";

myContext.fill();/script/body/html

8、繪制直線

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.lineWidth=5;

myContext.moveTo(0,0); ? ? ?//從坐標(0,0)到(200,0) ? ?myContext.lineTo(200,0);

myContext.stroke(); ? ? ? ? //繪制已定義的路徑/script/body/html

9、繪制曲線

!DOCTYPE htmlhtmlhead lang="en"

meta charset="UTF-8"

titlecanvas繪制圖形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"

var myCanvas=document.getElementById("myCanvas"); ? ?var myContext=myCanvas.getContext('2d');

myContext.moveTo(20,20);

myContext.quadraticCurveTo(20,100,200,20);

myContext.stroke();/script/body/html

html5 canvas 畫了一條直線，現(xiàn)在鼠標經(jīng)過這條直線觸發(fā)某一事件，如何確定鼠標經(jīng)過這條直線呢？

這個玩意有點復(fù)雜。首先要獲取點擊發(fā)生鼠標所在的坐標。然后判斷這個坐標是否在圖形的范圍內(nèi)。如果在，剛可以視為點擊了該圖形。圖形本身是不能響應(yīng)事件的。必須用canvas代理。只是要判斷的情況有時候很復(fù)雜。如果這個點所在的位置有多個圖形。這就需要判斷到底是具體的哪個。這就需要重繪圖，繪一次判斷一次。但這樣就可能產(chǎn)生DOM的事件冒泡那樣的情況。所以。。。要做好這個東西。面對的情況是相當(dāng)復(fù)雜的。建議還是多找找資料。做做測試。

文章題目：html5直線,html 直線
本文地址：http://m.rwnh.cn/article40/phjjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、Google、虛擬主機、定制開發(fā)、微信公眾號、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)