canvas实现环形叠加阴影动画效果代码-html代码-BFW代码库

canvas实现环形叠加阴影动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现环形叠加阴影动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  

  
  
</head>

<body translate="no">
  
  
      <script >
// speed-coded re-code of experiment from 2003

const canvas = document.createElement('canvas');
const c = canvas.getContext('2d');

document.body.append(canvas);

let lastRand = Math.random();

function zrand() {
  if (Math.random() < .8) return lastRand;

  lastRand = Math.random();
  return lastRand;
}

let mx = 0;
let my = 0;
onpointermove = e => {
  mx = e.clientX;
  my = e.clientY;
};

let hw;
let hh;

function resize() {

  w = innerWidth * 2;
  h = innerHeight * 2;
  hw = w / 2;
  hh = h / 2;
  canvas.width = w;
  canvas.height = h;
  canvas.style.width = innerWidth + 'px';
}
resize();

const S = 4;

function sprite(p) {
  p = Object.assign({
    x: 0,
    y: 0,
    rotation: 0,
    scaleX: 1,
    scaleY: 1,
    fill: 'gray',
    stroke: 'black',
    width: 100,
    height: 100,
    center: true },
  p);
  p.sx = p.x;
  p.sy = p.y;
  return () => {
    c.save();
    c.translate(p.x, p.y);
    c.rotate(p.rotation);
    c.scale(p.scaleX, p.scaleY);

    if (p.center) c.translate(-p.width / 2, -p.height / 2);

    c.fillStyle = p.fill;

    c.strokeStyle = p.stroke;
    p.draw(p);
    c.restore();
  };
}

let line = sprite({
  x: w / 2,
  y: h / 2,
  width: 1,
  t: zrand() * 100,
  center: false,
  rotation: zrand() * 7,
  stroke: 'rgba(0, 0, 0, .02)',
  draw(p) {
    if (zrand() < .7) {
     .........完整代码请登录后点击上方下载按钮下载查看