javascript 为什么canvas / scss的动画不工作？[关闭]

**关闭。**这个问题是not reproducible or was caused by typos。目前不接受答复。

此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这一个是解决的方式不太可能帮助未来的读者。
12小时前关闭。
Improve this question
我想创建一个椒盐卷饼雨，我已经采取了代码从 www.example.com 。Codepen link，但是当我在本地执行它时，它不工作。有人能帮帮我吗
HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page TEST</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src='../main.js'></script>
</head>
<body>
    
    
    <canvas id="canvas"></canvas>    
    
<script src='../main.js'></script>

    
</body>
</html>

CSS

body {
  margin: 0;
  overflow: hidden;
  background: #061928;
}/*# sourceMappingURL=style.css.map */

$(document).ready(function() {
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    if(canvas.getContext) {
      var ctx = canvas.getContext('2d');
      var w = canvas.width;
      var h = canvas.height;
      var img = new Image();
      img.src = "https://images.vexels.com/media/users/3/138154/isolated/preview/5d645814754f5509238ef242137b0fa3-oktoberfest-pretzel-cookie-illustration-by-vexels.png"; 
      
      var init = [];
      var maxParts = 1000;
      for(var a = 0; a < maxParts; a++) {
        init.push({
          x: Math.random() * w,
          y: Math.random() * h,
          l: Math.random() * 30,
          xs: -4 + Math.random() * 4 + 2,
          ys: Math.random() * 10 + 10
        })
      }
      
      var particles = [];
      for(var b = 0; b < maxParts; b++) {
        particles[b] = init[b];
      }
      
      function draw() {
        ctx.clearRect(0, 0, w, h);
        for(var c = 0; c < particles.length; c++) {
          var p = particles[c];
          ctx.drawImage(img, p.x, p.y, p.l, p.l); // draw image at particle's position
        }
        move();
      }
      
      function move() {
        for(var b = 0; b < particles.length; b++) {
          var p = particles[b];
          p.x += p.xs;
          p.y += p.ys;
          if(p.x > w || p.y > h) {
            p.x = Math.random() * w;
            p.y = -20;
          }
        }
      }
      
      setInterval(draw, 30);
      
    }
  });

SCSS

/*# sourceMappingURL=style.css.map */
body {
    margin: 0;
    overflow: hidden;
    background: #061928;
  }

style.css.map

{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":";AACA;EACI,SAAA;EACA,gBAAA;EACA,mBAAA;ACCJ","file":"style.css"}

我安装了几次SASS，我清空了我的缓存，并调整了我的代码几次，但它不起作用。

最有可能是由于没有jquery导入到您的网站添加
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
到主js上面的html
看起来会是这样。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page TEST</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src='../main.js'></script>
</head>
<body>
    <canvas id="canvas"></canvas>    
    <script src='../main.js'></script>
</body>
</html>

这里最重要的事情实际上比使它工作更重要，是你如何能够在未来自己解决这个问题。Chrome和其他网络浏览器通常都有开发工具，这将使解决这些问题变得更加容易。要在Chrome中打开开发工具，请按f12

javascript 为什么canvas / scss的动画不工作？[关闭]

1条答案

相关问题

热门标签

最新问答