canvas实现绘制弧线噪点动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现绘制弧线噪点动画效果代码

代码标签: canvas 绘制 弧线 噪点 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">

 
<style>
body
, html {
 
margin: 0;
 
overflow: hidden;
}

canvas
{
 
display: block;
 
cursor: pointer;
}
</style>



</head>

<body  >
 
<canvas id="canvas"></canvas>
 
 
     
<script >


class Mover {
  constructor() {
    this.x = Math.random() * w;
    this.y = Math.random() * h;
    const m = Math.min(w, h);
    this.size = (Math.random() + 0.08) * m * 0.1;
    this.r = (Math.random() + 0.1) * m * 0.4;
    const dir1 = Math.random() > 0.5 ? -1 : 1;
    this.ownAxisRotSpeed = dir1 * Math.random() * 0.03 + 0.007;
    const dir2 = Math.random() > 0.5 ? -1 : 1;
    this.rotSpeed = dir2 * Math.random() * 0.008 + 0.0005;
    this.ownAxisAngle = .........完整代码请登录后点击上方下载按钮下载查看

网友评论0