通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的canvas標(biāo)簽及應(yīng)用實(shí)例第3部分-資料下載頁
2024-11-14 07:40本頁面
【導(dǎo)讀】漸變是指從一種顏色向另一種顏色變化的填充，在顏色相交的地方做融合。變的起點(diǎn)和終點(diǎn)。addColorStop方法添加漸變顏色。為了實(shí)現(xiàn)線性的漸變的效果，繪制時(shí)必須制定開始和結(jié)。而在Canvas中，不僅可以只指定開始和結(jié)尾的兩點(diǎn)，中途的位置也能任意指定，一個(gè)圓的半徑，代表圓錐的第二個(gè)圓的中心，r1代表第二個(gè)圓的半徑。個(gè)圓中間區(qū)域出現(xiàn)。置，而漸變的具體顏色則由addColorStop函數(shù)實(shí)現(xiàn)。addColorStop函數(shù)為被標(biāo)明為在給定的偏移量上漸變的顏色指明了顏色。結(jié)束地點(diǎn)的顏色。當(dāng)然，如果offset大于1或者小于0，會發(fā)生INDEX_SIZE_ERR異常。fillText()函數(shù)來繪制出帶有漸變顏色效果的文字信息。2)為漸變對象設(shè)置顏色，指明過渡方式；3)在context上為填充樣式或者描邊樣式設(shè)置漸變。
【正文】 旦調(diào)用了 restore 函數(shù)，狀態(tài)堆中最后的狀態(tài)將會彈出，并恢復(fù)所有的設(shè)置。如果不是之前用 save 保存了“白色”的填充顏色狀態(tài)，那么則需要手動改變設(shè)置來回到前一個(gè)狀態(tài)，這在屬性修改量比較多的情況下，將會復(fù)雜。 應(yīng)用定時(shí)器創(chuàng)建動畫控制線程最終實(shí)現(xiàn)定時(shí)重繪 （ 1） setInterval 或者 setTimeout 函數(shù) 使用 setInterval 或者 setTimeout 函數(shù)創(chuàng)建動畫控制線程，其中 setInterval 函數(shù)重復(fù)地執(zhí)楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 24/29 頁 24 行所提供的代碼，而 setTimeout 函數(shù)只在所提供的時(shí)間過去之后執(zhí)行一次。 在對動畫進(jìn)行控制時(shí)，除了可以采用定時(shí)重繪的實(shí)現(xiàn)方式以外（一般應(yīng)用于不需要任何交互操作的場合），也還可以采用特定事件的重新繪制的技術(shù)手段來控制動畫效果 —— 可以利用用戶的輸入來操控，如果制作游戲，則可以使用鍵盤或鼠標(biāo)的事件來操控動畫。 （ 2）注意定時(shí)頻率的不準(zhǔn)確性 由于這種繪圖頻率很大程度上取決于支持 canvas 的底層 JavaScript 引擎的渲染速度以及相應(yīng)繪圖函數(shù)的復(fù)雜性，因而實(shí)際運(yùn)行的結(jié)果往往都是要慢于指定繪 圖頻率的。 動畫的實(shí)現(xiàn)示例 （ 1）示例頁面及相關(guān)的腳本代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 示例頁面 /title script type=text/javascript language= // 水的畫布 function drawWater() { var canvasWater = (myWaterCanvas)。 var contextWater = (2d)。 = .50。 // 創(chuàng)建一個(gè)線性漸變的填充 var linearGrad = (0,0,400,400)。 (0, 39。0000ff39。)。 // sets the first color (.25, 39。0099ff39。)。 // sets the second color (.50, 39。00ccff39。)。 // sets the third color (.75, 39。00ffff39。)。 // sets the fourth color = linearGrad。 (0,0,400,400)。 } // 游泳者的畫布 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 25/29 頁 25 setInterval(drawSwimmer, 30)。 var positionX = 0。 var positionY = 0。 function drawSwimmer(){ var canvasSwimmer = (mySwimmerCanvas)。 var contextSwimmer = (2d)。 (0,0,400,400)。 if (positionX 30){ positionX += 1。 positionY += 1。 } else{ positionX = 0。 positionY = 0。 } ()。 // 繪制一個(gè)圓作為頭部 var centerX = 200。 var centerY = 50。 var radius = 20。 ()。 (centerX, centerY+positionY, radius, 0, 2 * , false)。 = 000000。 ()。 = 5。 // 軀干部分 ()。 (200,70+positionY)。 (200,175)。 = 10。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 26/29 頁 26 = 000000。 = round。 ()。 // 畫右邊的手臂 ()。 (200, 100)。 (175positionX,140positionY)。 = 10。 = 000000。 = round。 ()。 // 畫左邊的手臂 ()。 (200, 100)。 (225+positionX,140positionY)。 = 10。 = 000000。 = round。 ()。 // 畫右邊的腿 ()。 (200, 175)。 (190positionX,250positionY)。 = 10。 = 000000。 = round。 ()。 // 畫左邊的腿 ()。 (200, 175)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 27/29 頁 27 (210+positionX,250positionY)。 = 10。 = 000000。 = round。 ()。 ()。 } /script /head body onload=drawWater()。 canvas id=myWaterCanvas width=400 height=400 style=zindex:2。 position:absolute。left:0px。top:0px。 /canvas canvas id=mySwimmerCanvas width=400 height=400 style=zindex:1。 position:absolute。left:0px。top:0px。 /canvas /body /html （ 2）示例的執(zhí)行結(jié)果 動畫示例 !DOCTYPE html html 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 28/29 頁 28 head meta charset=utf8 / titleCanvas javascript api demo/title link href= rel=stylesheet type=text/css media=screen / script type=text/javascript src= style type=text/css canvas { border:1px 000 solid。 /*width:300px。 height:300px。*/ } /style /head body div id=nav_slim/div h1this is a canvas api test page!/h1 canvas id=canvas width=300 height=300this browser does not support canvas.../canvas a href= /a script type=text/javascript var $=function(id){ return (id)。 } =function(){ var ctx=$(39。canvas39。).getContext(39。2d39。)。 =39。f0039。 (0, 0, 50, 50)。 var x=150,y=0,fx=fy=1,v=20。 setInterval(function(){ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán) 所有，盜版必究 ， 29/29 頁 29 (0, 0, 300, 300)。 x+=v*fx。 y+=v*fy。 if(x250||x0)fx*=1。 if(y250||y0)fy*=1。 (x, y, 50, 50)。 },100)。 } /script /body /html 為 canvas 動態(tài)添加事件 var canvas = (drawbroad)。 (mousemove, onMouseMove, false)。 (mousedown, onMouseDown, false)。 (mouseup, onMouseUp, false)。
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1