canvas圆点动效图

Posted 2023-03-19

参考技术A 我们发现很多动效都和canvas有关，我们可以绘制一块canvas作为背景，可以和canvas动画相联系，下面我们就绘制一块移动的小圆点动效图。

在html上canvas只需要一句话来展示，因此canvas的动画效果主要通过js来实现。在HTML上：

为了使canvas和页面上其他组件一同显示，且不影响页面其他组件展示，我们将canvas的position设置成fixed:

1、在js中，先获取画布： var  canvas  =  document .getElementById( 'myCanvas' );

2、渲染上下文：元素创造了一个固定大小的画布，它公开了一个或多个 渲染上下文 ，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中： var  ctx = canvas .getContext( '2d' );我们可以根据这个ctx来判断浏览器是否支持canvas。

3、初始化数据，设置canvas的大小：我们将宽高设置成页面的宽高：

4、为了使小圆点不那么单调，我们设置了彩色效果，定义了一些函数来设置颜色：

5、我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个对象。这个原型对象。可以根据自己的需求，选择性的将一些属性和方法通过prototype属性，挂载在原型对象通过这个属性，让实例对象也能够访问原型对象上的方法，绘制方法挂载到点对象上：

6、圆点生成以及移动：

7、最后将动画效果设置上去：

如果使用这样的canvas作为背景，会看起来更加生动，效果更好。