canvas实现线条黑白鼠标交互动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现线条黑白鼠标交互动画效果代码

代码标签: canvas 线条 黑白 鼠标 交互 动画

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

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

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">

</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas class="js-draw"></canvas>
    <!-- partial -->
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tinycolor.min.js"></script>
    <script type="module">
        import anime from '//repo.bfw.wiki/bfwrepo/js/module/anime.es.js';

// https://ptsjs.org/
const TAU = Math.PI * 2;

const canvas = document.querySelector('.js-draw');

class Stage {
  constructor(canvas, width, height) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');

    this.width = width;
    this.height = height;

    this.options = {
      rotation: Math.atan2(width, height) + Math.PI / 2,
      backgroundColor: '#011627',
      lineCo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0