|
已知圓的坐標(biāo)方程為： X=R*SIN(θ) Y=R*COS(θ) （0≤θ≤2π） 給定初始坐標(biāo)位置（X,Y），按照圓的坐標(biāo)方程，從角度angle = 0開始，每間隔angleSpeed = 0.2求得一個坐標(biāo)值(x,y)，將這個坐標(biāo)值作為偏移變化量，分別加到初始坐標(biāo)位置上，即在（X+x,Y+y）處填充字母“A”。填充15個字母后，清除畫布，重新從初始坐標(biāo)位置開始動畫過程。 編寫如下的HTML代碼。 <html> <head> <title>旋轉(zhuǎn)的字母（一）</title> </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;background:black;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var w2 = Math.floor(canvas.width/ 2); var h2 = Math.floor(canvas.height/ 2); var pi2 = Math.PI * 2; ctx.font = "36px Impact"; ctx.translate(w2, h2); var char = "A"; var x =0; var y =0; var radius = 30; var angle = 0; var angleSpeed = 0.2; var color='rgba(0,255,255,0.9)'; var age = 0; function animate() { ctx.fillStyle=color; ctx.fillText(char, x, y); x += Math.cos(angle) * radius; y += Math.sin(angle) * radius; angle += angleSpeed; age++; if (age >= 15) { ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height); x = 0; y = 0; angle = 0; age=0; } } setInterval('animate()',100); </script> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現(xiàn)出如圖1所示的動畫效果。
圖1 angleSpeed = 0.2的字母運動效果 若將上面程序中的語句“var angleSpeed = 0.2;”改寫為“var angleSpeed = 0.45;”，其余部分保持不變，則在瀏覽器窗口中呈現(xiàn)出如圖2所示的動畫效果。 圖2 angleSpeed = 0.45的字母運動效果 由圖1和圖2看出，輸出的字母“A”看起來沿著一個圓周線，但字母均是朝向正上方，能否讓字母朝著圓周線的方向呢？這需要在輸出字母的時候適當(dāng)旋轉(zhuǎn)坐標(biāo)。將程序中的語句 ctx.fillText(char, x, y); 改寫為： ctx.translate(x, y); ctx.rotate(angle + pi2 / 4); ctx.fillText(char, -13,10); ctx.rotate(-angle-pi2 / 4); ctx.translate(-x, -y); 其余部分保持不變，則在瀏覽器窗口中呈現(xiàn)出如圖3所示的動畫效果。 圖3 沿著圓周線運動的字母 由圖3看出，字母“A”的運動軌跡是確定的。若在角度angle的變化中加入隨機因素會怎樣呢？編寫如下的HTML文件。 <html> <head> <title>旋轉(zhuǎn)的字母（二）</title> </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;background:black;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var w2 = Math.floor(canvas.width/ 2); var h2 = Math.floor(canvas.height/ 2); var pi2 = Math.PI * 2; ctx.font = "36px Impact"; ctx.translate(w2, h2); var char = "A"; var x =0; var y =0; var radius = 30; var angle = pi2*0.05; var angleSpeed = 0.2; var color='rgba(0,255,255,0.9)'; var age = 0; function animate() { ctx.fillStyle=color; ctx.translate(x, y); ctx.rotate(angle + pi2 / 4); ctx.fillText(char, -13, 10); ctx.rotate(-angle-pi2 / 4); ctx.translate(-x, -y); x += Math.cos(angle) * radius; y += Math.sin(angle) * radius; angle += angleSpeed; age++; if (Math.random() > 0.75) // 加入隨機變化 { angleSpeed *= -1; } if (age >= 15) { ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height); x = 0; y = 0; angle = pi2*0.05; angleSpeed = 0.2; age=0; } } setInterval('animate()',100); </script> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現(xiàn)出如圖4所示的動畫效果。此時字母的運動軌跡就隨機變化著了。
圖4 有著隨機變化的沿著圓周線運動的字母 進一步我們考慮，能否將圖4的字母軌跡按一個圓周相似地繪制5條呢？采用一個循環(huán)加上適當(dāng)?shù)淖鴺?biāo)旋轉(zhuǎn)即可。編寫如下的HTML文件。 <html> <head> <title>旋轉(zhuǎn)的字母（三）</title> </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;background:black;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var w2 = Math.floor(canvas.width/ 2); var h2 = Math.floor(canvas.height/ 2); var pi2 = Math.PI * 2; ctx.font = "36px Impact"; ctx.translate(w2, h2); var char = "A"; var x =30; var y =30; var radius = 30; var angle = pi2*0.05; var angleSpeed = 0.2; color='rgba(0,255,255,0.9)'; age = 0; symmetry =5; function animate() { for (i = 0;i<symmetry; i++) { ctx.fillStyle=color; ctx.translate(x, y); ctx.rotate(angle + pi2 / 4); ctx.fillText(char, -13, 10); ctx.rotate(-angle-pi2 / 4); ctx.translate(-x, -y); ctx.rotate(pi2 / symmetry); } x += Math.cos(angle) * radius; y += Math.sin(angle) * radius; angle += angleSpeed; age++; if (Math.random() > 0.75) { angleSpeed *= -1; } if (age >= 15) { ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height); x = 30; y = 30; angle = pi2*0.05; angleSpeed = 0.2; age=0; } } setInterval('animate()',100); </script> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現(xiàn)出如圖5所示的動畫效果。
圖5 字母“A”的5條相似運動軌跡 更進一步，我們將上面程序中的初始坐標(biāo)位置（x,y）、初始角度angle、角度變化量angleSpeed、字母填充顏色color和相似軌跡條數(shù)symmetry均采用隨機數(shù)的方式確定初值，例如： x = rand(-w2/2,w2/2); y = rand(-h2/2,h2/2); angle = Math.random() * pi2; angleSpeed = Math.random() * 1 - 0.5; color='rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.9)'; symmetry =rand(3,10); 編寫如下的HTML代碼。 <html> <head> <title>旋轉(zhuǎn)的字母（四）</title> </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;background:black;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var w2 = Math.floor(canvas.width/ 2); var h2 = Math.floor(canvas.height/ 2); var pi2 = Math.PI * 2; ctx.font = "36px Impact"; ctx.translate(w2, h2); function rand(min,max) { return Math.floor(Math.random()*(max-min)+min) } var char = "A"; var x,y,radius,angle,angleSpeed,color,age,symmetry; function reset() { x = rand(-w2/2,w2/2); y = rand(-h2/2,h2/2); radius = 30; angle = Math.random() * pi2; angleSpeed = Math.random() * 1 - 0.5; color='rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.9)'; age = 0; symmetry =rand(3,10); } reset(); function animate() { for (i = 0;i<symmetry; i++) { ctx.fillStyle=color; ctx.translate(x, y); ctx.rotate(angle + pi2 / 4); ctx.fillText(char, -13, 10); ctx.rotate(-angle-pi2 / 4); ctx.translate(-x, -y); ctx.rotate(pi2 / symmetry); } x += Math.cos(angle) * radius; y += Math.sin(angle) * radius; angle += angleSpeed; age++; if (Math.random() > 0.75) { angleSpeed *= -1; } if (age >= 18) { ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height); reset(); } } setInterval('animate()',50); </script> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現(xiàn)出如圖6所示的動畫效果。 圖6 字母“A”的隨機運動 最后，我們在圖6的基礎(chǔ)上考慮，能否搞多個字母有周期地組合進行運動，以此得到字母的運動特效呢？編寫如下的HTML文件。 <html> <head> <title>旋轉(zhuǎn)的字母（五）</title> </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;background:black;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var w2 = Math.floor(canvas.width/ 2); var h2 = Math.floor(canvas.height/ 2); var pi2 = Math.PI * 2; ctx.font = "36px Impact"; ctx.translate(w2, h2); var srcChar =["A","B","C","D","E","F"]; var particles = []; var eIndex = 0; var rCnt=0; function rand(min,max) { return Math.floor(Math.random()*(max-min)+min) } function resetPart(part) { part.char = srcChar[eIndex++]; if (eIndex>=srcChar.length) { eIndex=0; } part.x = rand(-w2/2,w2/2); part.y = rand(-h2/2,h2/2); part.radius = 30; part.angle = Math.random() * pi2; part.angleSpeed = Math.random() * 1 - 0.5; part.color='rgba('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+',0.9)'; part.age = 0; part.symmetry =rand(3,10); } var count=2; for (var i=0;i<count;i++) { var part; part = {}; resetPart(part); rCnt++; particles.push(part); } function animate() { for (i =0;i<particles.length; i++) { part = particles[i]; for (j = 0;j<part.symmetry; j++) { ctx.fillStyle=part.color; ctx.translate(part.x, part.y); ctx.rotate(part.angle + pi2 / 4); ctx.fillText(part.char, -13, 10); ctx.rotate(-part.angle-pi2 / 4); ctx.translate(-part.x, -part.y); ctx.rotate(pi2 / part.symmetry); } part.x += Math.cos(part.angle) * part.radius; part.y += Math.sin(part.angle) * part.radius; part.angle += part.angleSpeed; part.age++; if (Math.random() > 0.75) { part.angleSpeed *= -1; } if (part.age >= 18) { resetPart(part); rCnt++; if (rCnt==6) { rCnt=0; ctx.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height); } } } } setInterval('animate()',50); </script> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中呈現(xiàn)出如圖7所示的動畫效果。 圖7 字母的運動特效 |
|
|
