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中文網其他相關文章！