个人中心
gpt4 book ai didi

Javascript 这个程序到底是如何将代码重新循环到 'move the circles' ，学习 javascript 和 canvas 的一个类

转载 作者：行者123 更新时间：2023-12-03 02:42:42 25 4
gpt4 key购买 nike

我正在上网络多媒体课，我们正在学习如何使用 html5 的 Canvas 和 javascript 在网页中创建交互性。我们正在复习书中的示例程序，我一直在脑子里运行代码，以便清楚地掌握它。我在当前示例中遇到问题:我的理解是:

它使用 'glasspane' div 在实际 Canvas 上方设置一个小菜单，因为显然您必须在 canvas 元素之外使用 html 控件，因为它无法同时运行 canvas .js 和 html 控件。

在.js文件中:

  • 它首先通过元素的 ID 获取元素，然后创建一个随机大小和颜色的圆圈数组。
  • 它向id startButton添加了一个鼠标点击事件，通过stopPropogation停止动画，然后交换paused的bool值。
  • Paused 在 setInterval 函数中使用，决定代码是否清除并重绘屏幕，然后绘制圆圈，然后运行一个函数将圆圈位置更改 1 并反转速度，以便它们从 Canvas 上“反弹”边界。

我不明白的是:

  • setInterval 函数是一个知道继续循环代码的特殊函数吗？如果这不是代码循环使用新的 x 和 y 值来显示圆圈“移动”的方式，那是哪一部分呢？
  • 使用stopPropogation后动画如何重新启动？
  • glasspane.onmousedown 和 context.canvas.onmousedown 函数到底有什么作用？唯一改变用户端程序的是单击开始/停止文本，该文本必须通过 startButton.onclick 运行。

代码如下。

javascript:

var context = document.getElementById('canvas').getContext('2d'),
    startButton = document.getElementById('startButton'),
    glasspane = document.getElementById('glasspane'),
    paused = true,
    circles = [];

drawGrid(context, 'lightgray', 10, 10);

context.lineWidth = 0.5;
context.font = '32pt Arial';

for (var i=0; i < 100; ++i) {
   circles[i] = { 
       x: 100, 
       y: 100, 
       velocityX: 3*Math.random(), 
       velocityY: 3*Math.random(), 
       radius: 50*Math.random(),
       color: 'rgba(' + (Math.random()*255).toFixed(0) + ', ' +
                        (Math.random()*255).toFixed(0) + ', ' +
                        (Math.random()*255).toFixed(0) + ', 1.0)' };
}

startButton.onclick = function(e) {
   e.preventDefault();
   e.stopPropagation();
   paused = ! paused;
   startButton.innerText = paused ? 'Start' : 'Stop';
};

glasspane.onmousedown = function(e) {
   e.preventDefault();
   e.stopPropagation();
}

context.canvas.onmousedown = function(e) {
    e.preventDefault();
    e.stopPropagation();
};

setInterval(function() {
   if (!paused) {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      drawGrid(context, 'lightgray', 10, 10);

      circles.forEach(function(circle) {
         context.beginPath();
         context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2, false);
         context.fillStyle = circle.color;
         context.fill(); 
         adjustPosition(circle);
      });
   }
}, 1000 / 60);

function adjustPosition(circle) {
   if (circle.x + circle.velocityX + circle.radius > context.canvas.width ||
       circle.x + circle.velocityX - circle.radius < 0) 
      circle.velocityX = -circle.velocityX;

   if (circle.y + circle.velocityY + circle.radius > context.canvas.height ||
       circle.y + circle.velocityY - circle.radius  < 0) 
      circle.velocityY= -circle.velocityY;

   circle.x += circle.velocityX;
   circle.y += circle.velocityY;
}

function drawGrid(context, color, stepx, stepy) {
   context.strokeStyle = color;
   context.lineWidth = 0.5;

   for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
      context.beginPath();
      context.moveTo(i, 0);
      context.lineTo(i, context.canvas.height);
      context.stroke();
   }

   for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
      context.beginPath();
      context.moveTo(0, i);
      context.lineTo(context.canvas.width, i);
      context.stroke();
   }
}

html:

<html>
   <head>
      <title>Bouncing Balls</title>

      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            margin-left: 10px;
            margin-top: 10px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }

         #glasspane {
            position: absolute;
            left: 50px;
            top: 50px;
            padding: 0px 20px 10px 10px;
            background: rgba(0, 0, 0, 0.3);
            border: thin solid rgba(0, 0, 0, 0.6);
            color: #eeeeee;
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-size: 12px;
            cursor: pointer;
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
         }

         #glasspane h2 {
            font-weight: normal;
         }

         #glasspane .title {
            font-size: 2em;
            color: rgba(255, 255, 0, 0.8);
         }

         #glasspane a:hover {
            color: yellow;
         }

         #glasspane a {
            text-decoration: none;
            color: #cccccc;
            font-size: 3.5em;
         }

         #glasspane p {
            margin: 10px;
            color: rgba(65, 65, 220, 1.0);
            font-size: 12pt;
            font-family: Palatino, Arial, Helvetica, sans-serif;
         }
      </style>
   </head>

   <body>
      <div id='glasspane'>
         <h2 class='title'>Bouncing Balls</h2>

         <p>One hundred balls bouncing</p>

         <a id='startButton'>Start</a>
      </div>

      <canvas id='canvas' width='750' height='500'>
         Canvas not supported
      </canvas>

      <script src='example.js'></script>
  </body>
</html>

最佳答案

探索此类代码的一种方法是对其进行试验。尝试注释掉其中的一部分，看看会发生什么。

无论如何，关于你的问题 - 我不确定为什么 onmousedown 处理程序在那里。他们在这里似乎没有做任何有用的事情。但也许有一点。

在 setInterval 函数上 - 它并不特殊。它只是重复执行传递给它的函数。它尝试每 1000/60 毫秒执行一次，相当于每秒执行 60 次。

(请注意，在生产代码中没有人使用 setInterval。相反，requestAnimationFrame 是正确的方法；或者如果不可用 - 至少 setTimeout。但这是一个单独的讨论，也许您仍然会在类里面讨论这部分内容。但是，在示例中使用 setInterval 是有意义的，因为它比替代方案更简单)

另请注意，在此示例中传递给 setInterval 的函数的所有内容都包含在 if (!paused) { ... } 中 - 这就是所需要的照顾停顿。当动画暂停时，该函数仍然会被调用，但它只是不执行任何操作。

关于Javascript 这个程序到底是如何将代码重新循环到 'move the circles' ，学习 javascript 和 canvas 的一个类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48253953/

25 4 0
文章推荐： javascript - react Redux : Using Immutable in Reduce State
文章推荐： javascript - typedoc/jsdoc 文档通用参数(回调参数)
文章推荐： javascript - Node.js 从用户输入中获取完整路径
文章推荐： javascript - knockout 数据绑定(bind)使表结果消失
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com