Canvas怎么繪制浮動球效果-創(chuàng)新互聯(lián)

這篇文章主要介紹了Canvas怎么繪制浮動球效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)公司專業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站建設(shè)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!

原效果

實(shí)現(xiàn)效果

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

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

github repo見這里.

Canvas

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移動畫筆到起點(diǎn), lineTo繪制線到終點(diǎn), stroke描邊.

Canvas全屏

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

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

動畫

Basic animations帶我上手.

基本步驟

做動畫的四個步驟:

1. 清除canvas內(nèi)容, 通常使用clearRect()

2. 保存canvas狀態(tài)

3. 繪制內(nèi)容

4. 重置canvas狀態(tài)

我做的這個比較簡單, 只用到了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ù)

三個可以用:

1. window.setInterval() 如果完全不需要用戶交互, 只是不斷重繪, 用這個就夠了.

2. window.setTimeout() 如果想要用戶操作, 如鍵盤鼠標(biāo), 影響動畫, 可以用這個. (不懂, 不是requestAnimationFrame更好么?)

3. window.requestAnimationFrame() 告知瀏覽器下次重繪之前要做的事情, 即你自己定制的繪制操作.

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

數(shù)據(jù)結(jié)構(gòu)

之前看過一點(diǎn)Game Engine Development, 有意識地做面向?qū)ο蟮姆庋b. 這里面用到的是非常簡單的.

最基礎(chǔ)的是Vector代表二維空間上的點(diǎn)/向量, 成員只有x, y.

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

然后封裝一些自用的成員函數(shù)即可.

開發(fā)環(huán)境

TypeScript + Webpack + Webpack-dev-server 不復(fù)雜, 參考以下內(nèi)容即可:

1. Webpack/Getting Started

2. Webpack/Typescript

3. Webpack/devServer

4. webpack-dev-server

另外, 還試用了npx, 用來運(yùn)行npm的可執(zhí)行程序. 以前webpack什么的都是全局安裝的, 直接調(diào)用webpack xx即可. 如果本地安裝webpack的話, 就需要通過./node_modules/.bin/webpack來運(yùn)行本地的webpack, 現(xiàn)在可以npx webpack xxx.

一個小坑

在devServer的config里面, 加入了hot: true想開啟熱更新, 結(jié)果網(wǎng)頁里面提示: [HMR] Hot Module Replacement is disabled.

發(fā)現(xiàn)是一個老坑, 需要調(diào)用的時候加上命令行參數(shù): webpack-dev-server --hot --inline

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Canvas怎么繪制浮動球效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站欄目：Canvas怎么繪制浮動球效果-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article6/djigig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站收錄、網(wǎng)站設(shè)計、標(biāo)簽優(yōu)化、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)