Question

我刚开始使用一些JavaScript，发现了名为canvas的东西。

我的问题是单击按钮后，我想更改笔触的颜色，但是我不知道如何。我没有主意，但我仍然认为这应该是我没有看到的一些简单解决方案。

如果有人可以提供帮助，我会很高兴。谢谢。

  const canvas = document.querySelector('#draw');
  // could be 3d, if you want to make a video game
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.lineWidth = 20;

  var color = "blue";

  console.log(color)

  ctx.strokeStyle = color;

  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;


  function draw(e, color) {
    // stop the function if they are not mouse down
    if(!isDrawing) return;
    //listen for mouse move event

    console.log(color)
    ctx.strokeStyle = color;

    console.log(e);
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }

  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);

<div>
    <button id="red" style="width: 50px; height: 50px; border-radius: 50%; background-color: red" onclick="draw(this.id)" ></button>
    <button id="blue" style="width: 50px; height: 50px; border-radius: 50%; background-color: blue" onclick="draw(this.id)"></button>
    <button id="green" style="width: 50px; height: 50px; border-radius: 50%; background-color: green" onclick="draw(this.id)"></button>

    <canvas id="draw" width="100" height="100"></canvas>
</div>

Answer 1

您正在同时使用canvas.addEventListener('mousemove', draw);和onclick="draw(this.id)的功能绘制

您可以做的是使用2个不同的功能。保留mousemove的draw函数，并创建另一个函数来设置颜色。

例如

<button id="red" style="width: 50px; height: 50px; border-radius: 50%; background-color: red" onclick="setColor(this.id)" ></button>
<button id="blue" style="width: 50px; height: 50px; border-radius: 50%; background-color: blue" onclick="setColor(this.id)"></button>
<button id="green" style="width: 50px; height: 50px; border-radius: 50%; background-color: green" onclick="setColor(this.id)"></button>

function setColor(color) {
    ctx.strokeStyle = color;
}

const canvas = document.querySelector('#draw');
// could be 3d, if you want to make a video game
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 20;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
ctx.strokeStyle = "blue";

function setColor(color) {
  ctx.strokeStyle = color;
}

function draw(e) {
  // stop the function if they are not mouse down
  if (!isDrawing) return;
  //listen for mouse move event
  ctx.strokeStyle = e;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

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);

<div>
  <button id="red" style="width: 50px; height: 50px; border-radius: 50%; background-color: red" onclick="setColor(this.id)"></button>
  <button id="blue" style="width: 50px; height: 50px; border-radius: 50%; background-color: blue" onclick="setColor(this.id)"></button>
  <button id="green" style="width: 50px; height: 50px; border-radius: 50%; background-color: green" onclick="setColor(this.id)"></button>

  <canvas id="draw" width="100" height="100"></canvas>
</div>

更改画布中的笔触颜色

1 个答案: