Canvas绘制浮动球效果的示例

最近关注区块链方面的信息, 瞎转悠, 偶然看到这个网站首页的效果. 一堆浮动的球, 球在 距离 较近的时候会有感应线连接, 鼠标也可以和球产生感应线. 看了下是用canvas做的.

原效果&nbs p;

实现效果

之前对svg有过很多接触, canvas 知道 也可以 做到 很强大的渲染效果, 但是一直没有什么使用场景给我上手的 机会 . 于是这次打算自己试着上手下.

另外, 之所以对这个感兴趣, 一个是喜欢视觉效果类的东西, 二是喜欢类似游戏引擎那种模拟物理世界的感觉, 试想一下这些球会相互碰撞, 或者 相互之间有引力斥力, 或者加上重力 因素 . 这个动画还可以开不少脑洞.

g IT h ub repo见 这里 .

Canvas

Canvas的画图指令很类似SVG里面的指令, 很 简单 .

画 圆

ctx.be gin Path();
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, f rom .y);
ctx.l inet o(to.x, to.y);
ctx. stroke ();

同样是beginPath开始一段路径, moveTo移动 画笔 到起点, lineTo 绘制 线到终点, stroke描边.

Canvas全屏

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

 VAR  canvas = document.getElementById("canvas");
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.h ei ght = window.innerHeight;
}
window.onload = window.onresize = resizeCanvas;

动画

Basic animations 带我上手.

基本步骤

做动画的四个步骤:

清除canvas内容, 通常使用clearRect() 保存canvas状态 绘制内容 重置canvas状态

我做的这个比较简单, 只用到了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.requestAnimationFr am e(draw);
}

控制函数

三个可以用:

window.setInterval() 如果完全不需要用户交互, 只是不断重绘, 用这个就够了. window.setTimeout() 如果想要用户操作, 如键盘鼠标, 影响动画, 可以用这个. (不懂, 不是requestAnimationFrame更好么?) window.requestAnimationFrame() 告知浏览器下次重绘之前要做的事情, 即你自己定制的绘制操作.

MDN里面的这个例子还挺酷的. CodePen . 可以动起来的, 下面只是一个截图.

数据结构

之前看过 一点 Game Engine Development, 有意识地做面向对象的封装. 这里面用到的是非常简单的.

最基础的是Vector代表二维空间上的点/向量, 成员只有x, y.

在此基础上, Circle代表圆, 成员center: Vector代表圆心, radius: number代表 半 径, s PE ed: Vector代表速度.

然后封装一些自用的成员函数即可.

开发环境

TypeScript + Webpack + Webpack-dev -s erver 不复杂, 参考以下内容即可:

Webpack/Getting Started Webpack/Typescript Webpack/devServer 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 - -i nline

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是 为你收集整理的 Canvas绘制浮动球效果的示例 全部内容，希望文章能够帮你解决 Canvas绘制浮动球效果的示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Canvas绘制浮动球效果的示例的详细内容...