帆布怎么绘制浮动球效果

　　介绍

这篇文章主要介绍了画布怎么绘制浮动球效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

原效果,

帆布怎么绘制浮动球效果

实现效果

帆布怎么绘制浮动球效果

之前对svg有过很多接触,帆布知道也可以做到很强大的渲染效果,但是一直没有什么使用场景给我上手的机会。于是这次打算自己试着上手下。

另外,之所以对这个感兴趣,一个是喜欢视觉效果类的东西,二是喜欢类似游戏引擎那种模拟物理世界的感觉,试想一下这些球会相互碰撞,或者相互之间有引力斥力,或者加上重力因素。这个动画还可以开不少脑洞。

github回购见这里。

<>强帆布

画布的画图指令很类似SVG里面的指令,很简单。

<>强画圆

ctx.beginPath (); 　　ctx.arc (this.center.x, this.center.y, this.radius,, 0,, 2, *, Math.PI); 　　ctx.fill ();

beginPath开始一段路径,弧画一个圆,然后填填充颜色。

<>强画线

ctx.beginPath (); 　　ctx.moveTo (from.x, from.y); 　　ctx.lineTo (to.x,目前); 　　ctx.stroke ();

同样是beginPath开始一段路径,移至移动画笔到起点、画线绘制线到终点,中风描边。

<>强帆布全屏

要保持画布一直全屏,只要在窗口> var  canvas =, . getelementbyid (“canvas"); 　　function  resizeCanvas (), { 　　,,,canvas.width =, window.innerWidth; 　　,,,canvas.height =, window.innerHeight; 　　}==window.onload  window.onresize  resizeCanvas;

<强>动画

基本动画带我上的手。

<>强基本步骤

做动画的四个步骤:

<李>

清除帆布内容,通常使用clearRect ()

<李>

保存帆布状态

<李>

绘制内容

<李>

重置帆布状态

我做的这个比较简单,只用到了1和3,就是不断地清空帆布然后重绘。

 window.onload =, function  (), {
　　,,,resizeCanvas ();
　　,,,window.requestAnimationFrame(画);
　　}；
　　function  cleanCanvas (), {
　　,,,ctx.clearRect (0, 0, canvas.width,, canvas.height);
　　}
　　function 画(),{
　　,,,cleanCanvas ();
　　,,,//draw 东西。
　　,,,window.requestAnimationFrame(画);
　　}

<>强控制函数

三个可以用:

<李>

setinterval()如果完全不需要用户交互,只是不断重绘,用这个就够了。

<李>

window.setTimeout()如果想要用户操作,如键盘鼠标,影响动画,可以用这个。(不懂,不是requestAnimationFrame更好么?)

<李>

window.requestAnimationFrame()告知浏览器下次重绘之前要做的事情,即你自己定制的绘制操作。

MDN里面的这个例子还挺酷的。CodePen。可以动起来的,下面只是一个截的图。

帆布怎么绘制浮动球效果

<强>数据结构

之前看过一点游戏引擎开发,有意识地做面向对象的封装。这里面用到的是非常简单的。

最基础的是向量代表二维空间上的点/向量,成员只有x, y。

在此基础上,圆代表圆,成员中心:向量代表圆心,半径:数代表半径,速度:向量代表速度。

然后封装一些自用的成员函数即可。

<>强开发环境

打印稿+ Webpack + Webpack-dev-server不复杂,参考以下内容即可:

<李>

Webpack/开始

<李>

Webpack/打印稿

<李>

Webpack/devServer

<李>

Webpack-dev-server

另外,还试用了npx,用来运行npm的可执行程序。以前webpack什么的都是全局安装的,直接调用webpack xx即可。如果本地安装webpack的话,就需要通过。/node_modules/in/webpack来运行本地的webpack,现在可以npx webpack xxx。

<>强一个小坑

在devServer的配置里面,加入了热点:真想开启热更新,结果网页里面提示:[HMR]热模块替换是禁用的。

发现是一个老坑,需要调用的时候加上命令行参数:webpack-dev-server——热——内联

感谢你能够认真阅读完这篇文章,希望小编分享的“帆布怎么绘制浮动球效果”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

帆布怎么绘制浮动球效果