JavaScript30 Day 8（Canvas）

这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解

第八天是实现一个用canvas实现一个绘画板，当鼠标按下并移动的时候，会出现颜色和大小渐变的线条
如下是效果图：

Day8效果图

Canvas

• 基本属性
  • getContext():返回一个用于在画布上绘图的环境。
  • strokeStyle():设置笔触的颜色
  • lineJoin():设置两条线相交时的角类型
  • lineCap()：设置或返回线条末端线帽的样式
• 路径绘制
  • beginPath():丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。
  • moveTo():路径的起始位置
  • lineTo():当前子路径添加一条直线。这条直线从当前点开始，到 (x, y) 结束。当方法返回时，当前点是 (x,y)。

彩虹渐变颜色---HSL

HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，明度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。可以进入这个网站去感受一下HSLhttp://www.hslpicker.com/
为了让颜色保持变化，我们要在hue超过360时，将其变为0

if (hue >= 360) {
    hue = 0;
  }

线条大小渐变

direction初始值为true，当线条大小大于100或小于1时，direction发生变化，控制线条大小的减小和增加

  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }

  if(direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }

事件监听部分

只有当鼠标按下的时候才能画出图像来(在移动端可以用touchstart、touchmove、touchCancel和touchend等来代替事件，移动端用click有300ms左右的延时)

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

完整Js部分代码

<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;

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


function draw(e) {
  if (!isDrawing) return; // stop the fn from running when they are not moused down
  console.log(e);
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];

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

  if(direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }

}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});


canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

</script>

---

以上就是我在day8中学到的知识，这里我同样参考了soyaine的中文指南，感谢