JavaScript- 与 HTMLanvas 一起使用

大家好，欢迎回到我对 Wes Bos 的 JavaScript30 体验的另一篇激动人心的文章！这可能是迄今为止我在这门课程中最有趣的了！ 开始这项挑战后，我很快决定与 Wes 一起编码，而不是尝试自己解决，因为我的能力远远超出了我的能力范围。 我以前从未使用过 Canvas，并且有很多语法我不理解。 我可以在浏览器中制作自己的蚀刻草图版本吗？ 是的，当然，我可以弄清楚这一点，但在看到他想要的成品后，我退了一步。

那么我们做了什么？ 基本上我们确实在 HTML5 Canvas 中制作了 Etch-a-Sketch。 最大的区别是当你画线的颜色和大小会不断变化。 我不会说谎……我仍然不完全理解我们是如何做到这一点的。 但我确实有一个相当不错的想法。

正如你从上图中看到的，我们最终得到了一个极其丰富多彩的设计，即使它一点也不实用。基本上，Canvas 似乎或多或少是“油漆”，但用途更多。 我真的不知道什么时候我会在任何项目中使用它，但总的来说它仍然是一个有趣的练习。

哦，学习 HSL 也很酷！ 他带我们去了mother effing HSL，这样我们就可以了解更多关于色调和颜色的知识。 我绝对建议您访问该网站，看看如何弄乱调色板。 我们通过直接在代码中调用它并在页面上绘制时递增它来使用它。

      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;
      let hue = 0;
      let direction = true;

      function draw(e) {
        if (!isDrawing) return;
        console.log(e);
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
        hue++;
        if (hue >= 360) {
          hue = 0;
        }
        if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
          direction = !direction;
        }
        if (direction) {
          ctx.lineWidth++;
        } else {
          ctx.lineWidth--;
        }
      }

您还可以看到我们如何通过根据鼠标的移动切换线条递增或递减的方向来更改线条本身的大小。 仅根据实际发生的情况，其中一行代码仍然让我感到困惑。 即 if (ctx.lineWidth >= 175 || ctx.lineWidth 方向=！方向；。 这整条线对我来说太疯狂了。 主要是它的设计如何在达到一定数量后自行翻转。 ||仍然让我感到困惑，我不知道你会如何或为什么使用！在 JavaScript 中。 在写完这篇文章后，我将进一步研究这一点，但如果有人可以向我解释一下这些概念，我将不胜感激。

在这次挑战中我还得到了另一个相当大的启示。 这就是在编写 JavaScript 时使用分号。 尽管有人向我建议，但我以前确实没有这样做过。 我认为只需结束一行并继续新一行就足够了。 我知道你必须在 CSS 中使用分号，如果你不这样做，任何东西都不会按照你想要的方式工作。 这是我第一次因为不使用 JavaScript 而遇到问题。 由于 ctx.lines() 之后没有分号，我的代码基本上崩溃了。 好吧，它仍然有效，但绝对不符合预期。 由于某种原因，它遇到了以下代码行，但分号完全解决了这个问题。 吸取教训。

总而言之，这是一个有趣的挑战。 我非常喜欢摆弄 HTML5 Canvas，即使我只触及了它的皮毛，你可以用它来做所有的事情。 我在浏览器上绘制的时间比应有的时间长，并且还返回并修改了一些值（即色调如何增加、线条的最大宽度等）只是为了看看会发生什么。 如果我尝试的话，我可能无法自己重新创建这个，但我仍然对用几行 JavaScript 可以完成的事情非常着迷！

这就是今天挑战的全部内容。 如果您有时间，我强烈建议您亲自尝试一下，因为这无疑是我迄今为止最有趣的！ 请留意我的 JavaScript30 的下一期：14 个必须了解的开发工具技巧！

以上是JavaScript- 与 HTMLanvas 一起使用的详细内容。更多信息请关注PHP中文网其他相关文章！