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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python super()函数使用及多重继承
2020/05/06 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
PHP如何删除一个Cookie值
2012/11/15 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
个人作风建设总结
2014/10/23 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
股权转让协议范本
2014/12/07 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
医学会议开幕词
2016/03/03 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
一文搞懂Redis中String数据类型
2022/04/03 Redis