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实现自定义滚动条代码分享
Aug 18 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
初中生学习生活的自我评价
2013/11/20 职场文书
大学生求职推荐信
2013/11/27 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
瘦西湖导游词
2015/02/03 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
学历证明范文
2015/06/16 职场文书