畫面左邊是一個 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);
}
沒有留言:
張貼留言