Question

我有一个项目，我试图仅使用纯JS而没有任何库。这个项目是关于一些HTML5画布的，其想法是：

有一个选色器，但如果尚未设置，则笔划应具有彩虹色。否则它应该具有颜色选择器的颜色。
笔触厚度不断变化，但是当笔划厚度超过100时，它开始减小；当笔划厚度小于2时，它开始增加。

但是我似乎真的无法在设置或未设置条件下获得颜色

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas</title>
  </head>
  <body>
    <input id="base" type="color" name="base" value="#ffc600">
    <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;


const colorpicker = document.querySelector('input');
colorpicker.addEventListener('change', () => {
// This weird if-statement checks if the color of the colorpicker is not set
  if (typeof this.value !== 'undefined') {
    rainbow = false;
    color = this.value;
  } else {
    rainbow = true;
  }
});



function draw(e) {
  if (!isDrawing) return; // stop the fn from running when they are not moused down
  console.log(e);
  hue ++;
  if (hue >= 360) {
    hue = 0;
  }
  if (rainbow === true) {
    color = `hsl(${hue}, 50%, 100%)`;
  } else {
    rainbow = false;
  }
  ctx.strokeStyle = color;
  ctx.beginPath();

  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  // getting our new offset
  [lastX, lastY] = [e.offsetX, e.offsetY];

  // if linewidth becomes over 100 it will start decreasing 
  // and if it becomes lesser than 2 it will start increasing
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 2) {
    direction = !direction;
  }

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

}

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>

  <style>
  html, body {
    margin:0;
  }
  </style>

  </body>
</html>

任何可以看到我的代码有问题或对如何执行操作有想法的人，请帮忙！

Answer 1

观察1 ：使用箭头功能时，您将无法再使用this。 if (typeof colorpicker.value !== 'undefined')而不是if (typeof this.value !== 'undefined')

观察2 ：您需要将color和rainbow声明为全局变量。另外，由于用户没有选择颜色，因此开头rainbow应该为true，并且在HTML中应删除输入值，否则将定义该值。

观察3 ，您的颜色= hsl(${hue}, 50%, 100%)；因为亮度为100％，这将始终为您提供白色；您将需要color = hsl(${hue}, 100%, 50%);

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;
let rainbow = true;
let color;


const colorpicker = document.querySelector('input');
colorpicker.addEventListener('change', () => {
  //console.log(typeof colorpicker.value);
// This weird if-statement checks if the color of the colorpicker is not set
  if (typeof colorpicker.value !== 'undefined') {
    rainbow = false;
    color = colorpicker.value;
  } else {
    rainbow = true;
  }
  
  //console.log(rainbow);
});



function draw(e) {
  if (!isDrawing) return; // stop the fn from running when they are not moused down
  //console.log(e);
 
  
 
  if (rainbow === true) {
    color = `hsl(${hue}, 100%, 50%)`;
     hue ++;
     if (hue >= 360) {
     hue = 0;
  }
  } else {
    rainbow = false;

  }
  
  ctx.strokeStyle = color;
  ctx.beginPath();

  // start from
  ctx.moveTo(lastX, lastY);
  // go to
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  // getting our new offset
  [lastX, lastY] = [e.offsetX, e.offsetY];

  // if linewidth becomes over 100 it will start decreasing 
  // and if it becomes lesser than 2 it will start increasing
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 2) {
    direction = !direction;
  }

  if(direction) {
    ctx.lineWidth += 2;
  } else {
    ctx.lineWidth -= 2;
  }

}

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);

<input id="base" type="color" name="base" >
<canvas id="draw" width="800" height="800"></canvas>

HTML5画布颜色和JS

1 个答案: