iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
2
Modern Web

實作經典 JavaScript 30系列 第 12

Day12: 在Canvas畫布上,用滑鼠畫畫(二)

今天可以再來玩一些Canvas的功能

1.更改畫筆的顏色,讓畫筆畫出彩虹的顏色
這邊是使用HSL色彩概念,
HSL即色相、飽和度、亮度(hue,Saturation,Lightness)
hue色相---
紅色為0度(360度);黃色為60度;綠色為120度;
青色為180度;藍色為240度;品紅色為300度。
也就是hue在每360度就會有一次循環。
所以可以設定一個變數

let hue = 0;

在draw函式將hue++,並在達到360時歸零,重新計算

function draw(e) {
    ...
    lastY = e.offsetY;
    hue++;
    if (hue > 360) {
      hue = 0;
    }
}

這樣畫筆的顏色就會持續不斷的替換。

2.動態更改畫筆的粗細度

ctx.lineWidth = "1"; // 畫筆的粗細

如果只是在draw函式,將ctx.lineWidth++,這樣畫筆粗度會無限加大,
我希望是加粗到一個程度,會再慢慢變細。
所以可以設定一個變數來確認現在是要讓畫筆粗細,
向上增加還是向下遞減

let direction = true;

在畫筆粗細大於 >=100 或者 畫筆粗細 <= 1 時
direction變數會轉換成false,
同時也帶動畫筆粗細要遞增或遞減,
這樣就能夠控制畫筆粗細介於 1~100之間

function draw(e) {
    ...
    if (hue > 360) {
      hue = 0;
    }
    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
      direction = !direction;
    }
    if (direction) {
      ctx.lineWidth++;
    } else {
      ctx.lineWidth--;
    }
}

今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day11: 在Canvas畫布上,用滑鼠畫畫(ㄧ)
下一篇
Day13: 認識console
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言