html5繪製小球波形運動

var canvas=document.getelementbyid("ballbroad");

var context=canvas.getcontext("2d"); //

角度var angle=0; //

y步長var speedy=0.1; //

x步長var speedx=3; //

重新整理頻率

var frames=1000/60; //

球物件var ball=

function(radius,color,x,y)

//中心點

var centerx=canvas.width/2;

var centery=canvas.height/2; //

存放小球走過的點

var points=; //

建立乙個球 

var newball=

new ball(20,"#ff000",0,centery); //

在畫板中間繪製球 

drawball(newball); //

存放            points.push(); //

讓球平穩的動起來

var drawasync = eval(jscex.compile("async", 

function () 

angle+=speedy;

drawball(newball); //

存放小球的點

points.push(); //

繪製線條

drawballline(); //

每秒60次

$await(jscex.async.sleep(frames));

}                                

}));

drawasync().start();

function drawball(ball)

//繪製小球的移動軌跡

function drawballline()

context.lineto(points[i].x,points[i].y)

context.stroke(); }

}

HTML5繪製顏色漸變

繪製線性漸變要用到 createlineargradient，方法如 createlineargradient xstart,ystart,xend,yend xstart為漸變起始地點的橫座標，ystart為漸變起始地點的縱座標，xend為漸變結束地點的橫座標，yend為漸變起始地點的縱座標。繪製...

HTML5繪製實心的文字

html5繪製實心的文字 1 設計原始碼 2 實現結果 3 原始碼說明 1 建立乙個畫布，設定寬度和高度 2 獲取到元素 var canvas document.getelementbyid canvas 3 建立context物件 var ctx canvas.getcontext 2d 4 設定...

HTML5繪製實心的文字

html5繪製實心的文字 1 設計原始碼 2 實現結果 3 原始碼說明 1 建立乙個畫布，設定寬度和高度 2 獲取到元素 var canvas document.getelementbyid canvas 3 建立context物件 var ctx canvas.getcontext 2d 4 設定...