上升的 Canvas 氣球

畫面左邊是一個 canvas 元素，設定其 id 為，cvs，調用貝茲曲線函式，描繪氣球，調用createLinearGradient建立氣球表面的漸層，最後利用遞迴每 30 毫秒清空畫面再重繪一次，完成動畫效果，重繪時先調用 translate 改變目前的座標點往上移動一個像素，模擬往上移動的效果。

var cvs = document.getElementById('cvs');

 var ctx = cvs.getContext('2d');

 //

 var y = 0;

 drawB(); 

 function drawB() {    

     ctx.clearRect(0, 0, cvs.width, cvs.height);

     ctx.translate(0, -1);

     ctx.beginPath();

     ctx.moveTo(100, 300);

     ctx.bezierCurveTo(100, 150,

300, 150, 300, 300);

     ctx.bezierCurveTo(300, 500,

100, 500, 100, 300); 

     var rg = ctx.createLinearGradient(

125, 155, 300, 300);

     rg.addColorStop(0,

'rgba(255,255,255,0.85)');

     rg.addColorStop(0.78, 'rgb(0,0,255)');

     ctx.fillStyle = rg;

     ctx.fill();

     ctx.closePath();

     ctx.beginPath();

     ctx.moveTo(200, 440);

     ctx.lineTo(190, 460);

     ctx.lineTo(210, 460);

     ctx.fillstyle = 'rgb(0,0,255)';

     ctx.fill();

     ctx.closePath();

     y--;

     if (y > -300)  setTimeout(drawB, 30);

 }