js实现canvas粒子随机运动鼠标悬浮放大动画效果代码-html代码-BFW代码库

js实现canvas粒子随机运动鼠标悬浮放大动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子随机运动鼠标悬浮放大动画效果代码

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

<!doctype html>
<html>

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

    <style>
        * {
                margin:0;
                padding:0;
        }
        canvas {
                background-color:#C3373E
        }
    </style>

</head>

<body>

    <canvas></canvas>

    <script>
        // WIP
        // COLOR BUG
        
        const c = document.querySelector('canvas');
        // creating c as a 'brush'
        let ctx = c.getContext('2d');
        /*  var image = new Image();
          
          image.onload = function() {
              console.log('Loaded image');
              // do somethingElse()
              ctx.drawImage(image, 0, 0, c.width, c.height);
             // works like CSS, apply styles before 
          }
          
          image.src = 'giphyHalloween.gif'; 
          // make canvas full screen
          c.width = window.innerWidth;
          c.height = window.innerHeight;
          ctx.fillStyle = 'blue'
          ctx.strokeStyle = 'red'
          ctx.font = '36pt Helvetica'
          ctx.textAlign = 'center'
          // x y width height
          ctx.fillRect(100, 100, 100, 100);
          ctx.strokeRect(50, 50, 50, 50);
          // beginPath for making a new shape
          ctx.beginPath();
          // moves drawing to the location, no .........完整代码请登录后点击上方下载按钮下载查看