Canvas绘制浮动球效果的示例


Posted in HTML / CSS onDecember 29, 2017

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

原效果 

Canvas绘制浮动球效果的示例

实现效果

Canvas绘制浮动球效果的示例

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

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

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移动画笔到起点, lineTo绘制线到终点, 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内容, 通常使用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 draw() {
    cleanCanvas();
    // draw stuffs.
    window.requestAnimationFrame(draw);
}

控制函数

三个可以用:

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

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

Canvas绘制浮动球效果的示例

数据结构

之前看过一点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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 #HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 #HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 #HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 #HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 #HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 #HTML / CSS
canvas如何绘制钟表的方法
Dec 13 #HTML / CSS
You might like
php+mysql数据库查询实例
2015/01/21 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
红旗方阵解说词
2014/02/12 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python