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

Canvas 動畫 - 簡單物件向量移動

簡單物件移動這篇裏面,示範了最簡單的物體移動,透過三角函數,可以更進一步實作出非水平或垂直運動,如下圖:


您的瀏覽器不支援 HTML5 動畫,請改用 Chrome 或 Firefox

修改其中改變 x,y 座標的程式碼如下:

function drawCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, y, 12, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    x += 6;
    if (x > 600) { x = 0; y = 600; } else {
         y =600-( Math.tan(45 * Math.PI/180  ) * x);
    }}
}

其中透過 tan() 函式,取得每一次 x  座標移動 6 個單位, y 於 45 度移動的距離,即可算出對角線的移動座標,達到此效果。

Canvas 動畫 - 簡單物件移動
Canvas 動畫 - 簡單物件向量移動
Canvas 動畫 - 描述三角函數 Sin(x) 圖形




沒有留言: