Canvas繪製浮動球效果的範例

最近關注區塊鏈方面的資訊, 瞎轉悠, 偶然看到這個網站首頁的效果. 一堆浮動的球, 球在距離較近的時候會有感應線連接, 滑鼠也可以和球產生感應線. 看了下是用canvas做的.

原效果

實現效果

之前對svg有過很多接觸, canvas知道也可以做到很強大的渲染效果, 但是一直沒有什麼使用場景給我上手的機會. 於是這次打算自己試著上手下.

另外, 之所以對這個感興趣, 一個是喜歡視覺效果類的東西, 二是喜歡類似遊戲引擎那種模擬物理世界的感覺, 試想一下這些球會相互碰撞, 或者相互之間有引力斥力, 或者加上重力因素. 這個動畫還可以開不少腦洞.

github repo見這裡.

Canvas的畫圖指令很類似SVG裡面的指令, 很簡單.

ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

beginPath開始一段路徑, arc畫一個圓, 然後fill填滿顏色.

ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

同樣是beginPath開始一段路徑, moveTo移動畫筆到起點, lineTo繪製線到終點, stroke描邊.

要保持canvas一直全螢幕, 只要在window onload或onresize的時候重置一下canvas的寬高即可.

 var canvas = document.getElementById(canvas);function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;}window.onload = window.onresize = resizevas;

Basic animations帶我上手.

做動畫的四個步驟:

1. 清除canvas內容, 通常使用clearRect()
2. 儲存canvas狀態
3. 繪製內容
4. 重置canvas狀態

我做的這個比較簡單, 只用到了1和3, 就是不斷地清空canvas然後重繪.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function dvas() { clean (); // draw stuffs. window.requestAnimationFrame(draw);}

三個可以用:

1. window.setInterval() 如果完全不需要使用者互動, 只是不斷重繪, 用這個就夠了.
2. window.setTimeout() 如果想要使用者操作, 如鍵盤滑鼠, 影響動畫, 可以用這個. (不懂, 不是requestAnimationFrame更好麼?)
3. window.requestAnimationFrame() 告知瀏覽器下次重繪之前要做的事情, 即你自己定制的繪製操作.

MDN裡面的這個例子還挺酷的. CodePen. 可以動起來的, 下面只是一個截圖.

之前看過一點Game Engine Development, 有意識地做物件導向的封裝. 這裡面用到的是非常簡單的.

最基礎的是Vector代表二維空間上的點/向量, 成員只有x, y.

在此基礎上, Circle代表圓, 成員center: Vector代表圓心, radius: number代表半徑, speed: Vector代表速度.

然後封裝一些自用的成員函數即可.

TypeScript + Webpack + Webpack-dev-server 不複雜, 參考以下內容即可:

1. Webpack/Getting Started
2. Webpack/Typescript
3. Webpack/devServer
4. webpack-dev-server

另外, 也試用了npx, 用來運行npm的可執行程式. 以前webpack什麼的都是全域安裝的, 直接呼叫webpack xx即可. 如果本地安裝webpack的話, 就需要通過./node_modules/.bin/webpack來運行本地的webpack, 現在可以npx webpack xxx.

在devServer的config裡面, 加入了hot: true想開啟熱更新, 結果網頁裡面提示: [HMR] Hot Module Replacement is disabled.

發現是老坑, 需要呼叫的時候加上命令列參數: webpack-dev-server --hot --inline

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。