【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

上升的 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);
 }    

沒有留言: