最近关注区块链方面的信息, 瞎转悠, 偶然看到这个网站首页的效果. 一堆浮动的球, 球在距离较近的时候会有感应线连接, 鼠标也可以和球产生感应线. 看了下是用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带我上手.
基本步骤
做动画的四个步骤:
清除canvas内容, 通常使用clearrect()保存canvas状态绘制内容重置canvas状态刺猬的优雅影评我做的这个比较简单, 只用到了1和3, 就是不断地清空canvas然后重绘.
window.onload = function () { resizecanvas(); window.requestanimationframe(draw);};functi如何清洁饮水机on cleancanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height);}function draw() { cleancanvas(); // draw stuffs. window.requestanimationframe(draw);}
控制函数
三个可以用:
window.tinterval() 如果完全不需要用高考神器户交互, 只是不断重绘, 用这个就够了.window.ttimeout() 如果想要用户操作, 如键盘鼠标, 影响动画, 可以用这个. (不懂, 不是requestanimationframe更好么?)window.requestanimationframe() 告知浏览器下次重绘之前要做的事情, 即你自己定制的绘制操作.mdn里面的这个例子还挺酷的. codepen. 可以动起来的, 下面只是一个截图.
数据结构
之前看过一点game engine development, 有意识地做面向对象的封装. 这里面用到的是非常简单的.
最基础的是vector代表二维空间上的点/向量, 成员只有x, y.
在此基础上, circ护坡工程le代表圆, 成员center: vector代表圆心, radius: number代表半径, speed: vector代表速度.
然后封装一些自用的成员函数即可.
开发环境
typescript + webpack + webpack-dev-rver 不复杂, 参考以下内容即可:
webpack/getting startedwebpack/typescriptwebpack/devrver另外, 还试用了npx, 用来运行npm的可执行程序. 以前webpack什么的都是全局安装的, 直接调南洋职业技术学院用webpack xx即可. 如果本地安装webpack的话, 就需要通过./node_modules/.bin/webpack来运行本地的webpack, 现在可以npx webpack xxx.
一个小坑
在devrver的config里面, 加入了hot: true想开启热更新, 结果网页里面提示: [hmr] hot module replacement is disabled.
发现是一个, 需要调用的时候加上命令行参数: webpack-dev-rver –hot –inline
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。
本文发布于:2023-04-06 11:11:48,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/7a3f651ee320cd7ef9759c9ce6edd44e.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:Canvas绘制浮动球效果的示例.doc
本文 PDF 下载地址:Canvas绘制浮动球效果的示例.pdf
留言与评论(共有 0 条评论) |