canvas小球沿曲线运动,canvas能旋转画布内图片
最近，我关注了关于区块链的信息，四处逛了逛，偶然发现了这个网站首页的效果。一堆漂浮的球。小球靠在一起会有感应线，鼠标也能和小球产生感应线。看完，是帆布做的。
原始效果
实现效果
之前接触过很多svg，canvas也知道它也能达到非常强大的渲染效果，但是一直没有机会让我使用场景。所以这一次，我打算一试身手。
另外，我对这个感兴趣的一个原因是我喜欢视觉效果，另一个原因是我喜欢像游戏引擎一样模拟物理世界的感觉。想象一下，这些球会互相碰撞，或者互相吸引和排斥，或者加上重力。这个动画也能开很多脑洞。
gitrepo见此。
Canvas
Canvas的绘制指令非常简单，类似于SVG中的指令。
画圆
CTX . begin path()；ctx.arc(this.center.x，this.center.y，this.radius，0，2 * Math。PI)；CTX . fill()；BeginPath开始一个路径，arc画一个圆，然后填充颜色。
画线
CTX . begin path()；ctx.moveTo(from.x，from . y)；ctx.lineTo(to.x，to . y)；CTX . stroke()；类似地，beginPath开始路径，move将画笔移动到起点，line将线条绘制到终点，以及stroke。
Canvas全屏
要让画布一直保持全屏，只需在窗口加载或调整大小时重置画布的宽度和高度。
var canvas=document . getelementbyid( canvas )；函数resize canvas(){ canvas . width=window . inner width；canvas . height=window . inner height；} window . onload=window . onresize=resize canvas；动画
基础动画带我入门。
基本步骤
动画的四个步骤：
清除画布内容，通常使用clearRect()保存画布状态，绘制内容，重置画布状态。我做的比较简单，只用1和3，就是不断清空画布，重新绘制。
window . onload=function(){ resize canvas()；window . requestanimationframe(draw)；};函数cleanCanvas() { ctx.clearRect(0，0，canvas.width，canvas . height)；}函数draw(){ clean canvas()；//画东西。window . requestanimationframe(draw)；}控制函数
可以使用三种：
Window.setInterval()如果完全不需要用户交互，只要不断重绘就可以了，这个就够了。window.setTimeout()如果你想让用户操作，比如键盘和鼠标，来影响动画，可以用这个。(我不明白，requestAnimationFrame不是更好吗？)window.requestAnimationFrame()告诉浏览器在下一次重绘之前做什么，也就是你自己定制的绘制操作。MDN中的这个例子相当酷。CodePen可以移动，以下只是截图。
数据结构
之前看过游戏引擎开发，自觉做面向对象的包装。这里用的很简单。
最基本的一种是，Vector表示二维空间中的一个点/向量，其成员只有X和y .
在此基础上，Circle代表圆，member center: Vector代表中心，radius: number代表半径，speed: Vector代表速度。
然后封装一些自用的成员函数。
开发环境
脚本web pack web pack-dev-server并不复杂，参考以下即可：
pack/getting started web pack/typescript web pack/devserver web pack-dev-server另外还试用了npx来运行npm的可执行程序。过去，关于web pack的一切都是全球安装的。直接打webpack xx就行了。如果您在本地安装webpack，您需要通过运行本地webpack。/node_modules/。bin/webpack。现在可以npx webpack xxx了。
一个小坑
在devServer的配置中增加hot: true打开热更新，结果页面提示：[hmr]热模块替换被禁用。
是个老坑。需要调用时，添加命令行参数：webpack-dev-server-hot-online。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。