最近關(guān)注區(qū)塊鏈方面的信息, 瞎轉(zhuǎn)悠, 偶然看到這個(gè)網(wǎng)站首頁(yè)的效果. 一堆浮動(dòng)的球, 球在距離較近的時(shí)候會(huì)有感應(yīng)線連接, 鼠標(biāo)也可以和球產(chǎn)生感應(yīng)線. 看了下是用canvas做的.
| 原效果 | 實(shí)現(xiàn)效果 |
|---|---|
 expected.gif
|
 demo.gif
|
之前對(duì)svg有過(guò)很多接觸, canvas知道也可以做到很強(qiáng)大的渲染效果, 但是一直沒(méi)有什么使用場(chǎng)景給我上手的機(jī)會(huì). 于是這次打算自己試著上手下.
另外, 之所以對(duì)這個(gè)感興趣, 一個(gè)是喜歡視覺(jué)效果類的東西, 二是喜歡類似游戲引擎那種模擬物理世界的感覺(jué), 試想一下這些球會(huì)相互碰撞, 或者相互之間有引力斥力, 或者加上重力因素. 這個(gè)動(dòng)畫(huà)還可以開(kāi)不少腦洞.
github repo見(jiàn)這里.
Canvas
Canvas的畫(huà)圖指令很類似SVG里面的指令, 很簡(jiǎn)單.
畫(huà)圓
ctx.beginPath();
ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);
ctx.fill();
beginPath開(kāi)始一段路徑, arc畫(huà)一個(gè)圓, 然后fill填充顏色.
畫(huà)線
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
同樣是beginPath開(kāi)始一段路徑, moveTo移動(dòng)畫(huà)筆到起點(diǎn), lineTo繪制線到終點(diǎn), stroke描邊.
Canvas全屏
要保持canvas一直全屏, 只要在window onload或onresize的時(shí)候重置一下canvas的寬高即可.
var canvas = document.getElementById("canvas");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.onload = window.onresize = resizeCanvas;
動(dòng)畫(huà)
Basic animations帶我上手.
基本步驟
做動(dòng)畫(huà)的四個(gè)步驟:
- 清除canvas內(nèi)容, 通常使用
clearRect() - 保存canvas狀態(tài)
- 繪制內(nèi)容
- 重置canvas狀態(tài)
我做的這個(gè)比較簡(jiǎn)單, 只用到了1和3, 就是不斷地清空canvas然后重繪.
window.onload = function () {
resizeCanvas();
window.requestAnimationFrame(draw);
};
function cleanCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function draw() {
cleanCanvas();
// draw stuffs.
window.requestAnimationFrame(draw);
}
控制函數(shù)
三個(gè)可以用:
-
window.setInterval()如果完全不需要用戶交互, 只是不斷重繪, 用這個(gè)就夠了. -
window.setTimeout()如果想要用戶操作, 如鍵盤鼠標(biāo), 影響動(dòng)畫(huà), 可以用這個(gè). (不懂, 不是requestAnimationFrame更好么?) -
window.requestAnimationFrame()告知瀏覽器下次重繪之前要做的事情, 即你自己定制的繪制操作.
MDN里面的這個(gè)例子還挺酷的. CodePen. 可以動(dòng)起來(lái)的, 下面只是一個(gè)截圖.
數(shù)據(jù)結(jié)構(gòu)
之前看過(guò)一點(diǎn)Game Engine Development, 有意識(shí)地做面向?qū)ο蟮姆庋b. 這里面用到的是非常簡(jiǎn)單的.
最基礎(chǔ)的是Vector代表二維空間上的點(diǎn)/向量, 成員只有x, y.
在此基礎(chǔ)上, Circle代表圓, 成員center: Vector代表圓心, radius: number代表半徑, speed: Vector代表速度.
然后封裝一些自用的成員函數(shù)即可.
開(kāi)發(fā)環(huán)境
TypeScript + Webpack + Webpack-dev-server 不復(fù)雜, 參考以下內(nèi)容即可:
另外, 還試用了npx, 用來(lái)運(yùn)行npm的可執(zhí)行程序. 以前webpack什么的都是全局安裝的, 直接調(diào)用webpack xx即可. 如果本地安裝webpack的話, 就需要通過(guò)./node_modules/.bin/webpack來(lái)運(yùn)行本地的webpack, 現(xiàn)在可以npx webpack xxx.
更多見(jiàn)npx
一個(gè)小坑
在devServer的config里面, 加入了hot: true想開(kāi)啟熱更新, 結(jié)果網(wǎng)頁(yè)里面提示: [HMR] Hot Module Replacement is disabled.
發(fā)現(xiàn)是一個(gè)老坑, 需要調(diào)用的時(shí)候加上命令行參數(shù): webpack-dev-server --hot --inline
