從《ajax修煉之道》裏摘出來的一段有關canvas的代碼，可是在firefox和ie裏都不能達到應有的效果，正確的網頁效果應該是畫出來的一段漂亮的圖形。
對canvas一直都不是特別懂，但覺得他很神奇，期望高人指點迷津！！！多謝！！！
代碼如下：
<!DOCTYPE html>
<title>canvas demo: with beginPath() and closePath()</title>
<p>Speed</p>
<canvas width="300" height="300"> Your browser does not support canvas.</canvas>
<script>
function drawStuff(){
var phi=1.61803399;
var canvas=document.gerElementsByTageName("canvas")[0];
if(canvas.getContext){
var ctx=canvas.getContext("2d");
ctx.save();
ctx.translate(canvas.width/2.0,canvas.height/2.0);
var i=0;
var then=new Date();
for(var i=0;i<300;i++){
var theta=(i*phi*Math.PI*0.05);
var r=0.4*i;
var xc=r*Math.cos(theta);
var yc=r*Math.sin(theta);
var rho=(i/150.0)*Math.PI;
var alpha=(i+50)/700;
var red=Math.floor(192.0+(63.0*Math.sin(rho)));
var green=Math.floor(192.0+(63.0*Math.cos(rho)));
var blue=Math.floor(Math.sqrt(red));
ctx.beginPath();
ctx.fillStyle="rgba("+red+","+green+","+blue+","+(1.0-alpha)+");
ctx.arc(xc,yc,alpha*40.0,0,2*Math.PI,0);
ctx.fill();
ctx.arc(xc,yc,alpha*40.0,0,2*Math.PI,0);
ctx.strokeStyle="rgba(0,0,0,"+alpha+")";
ctx.stroke();
ctx.closePath();
}
var now=new Date();
document.getElementsByTageName('p')[0].textContent +=" "+(now-then)+"ms";
ctx.restore();
}
}
drawStuff();
</script>
大家幫忙看看這段代碼（來自ajax修煉之道）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章