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选择器的研究(详解)
Sep 16 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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 定义404页面的实现代码
2012/11/19 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
简单谈谈favicon
2015/06/10 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python判断字符串是否纯数字的方法
2014/11/19 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
简历的自我评价
2014/02/03 职场文书
暂停营业通知
2015/04/25 职场文书
唐山大地震观后感
2015/06/05 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Python 数据可视化之Bokeh详解
2021/11/02 Python