我不明白為什么我不能在 JavaScript 中改變蠟筆的顏色

Question

我一直在嘗試使用 html/css 和 javascript 開發類似“繪畫”的應用程序。 我做了一個功能，當你點擊一支蠟筆時，它應該改變它正在繪制的顏色。 我用span來制作蠟筆。 我對此很陌生，所以我真的不知道如何調試這個 issue.s

$(document).ready(function() {

  var ok = false;
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var clickColor = new Array();
  var curent_color = '#000000';
  var context = document.getElementById('Canvas').getContext("2d");
  console.log(context);


  $('#Canvas').mousedown(function(e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    ok = true;
    addClick(mouseX, mouseY);
    redraw();

  });

  $('#Canvas').mousemove(function(e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    if (ok != false) {
      addClick(mouseX, mouseY, true);
      redraw();
    }
  });

  $('#Canvas').mouseup(function(e) {
    ok = false;
  });
  $('#Canvas').mouseleave(function(e) {
    ok = false;
  });

  function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
    clickColor.push(curent_color);

  }

  function redraw() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    context.strokeStyle = curent_color;
    context.globalAlpha = 0.5;
    context.lineJoin = "round";
    context.lineWidth = 20;

    for (var i = 0; i < clickX.length; i++) {
      context.beginPath();
      if (clickDrag[i] && i) {
        context.moveTo(clickX[i - 1], clickY[i - 1]);
      } else {
        context.moveTo(clickX[i] - 1, clickY[i]);
      }
      context.lineTo(clickX[i], clickY[i]);
      context.closePath();
      context.strokeStyle = clickColor[i];
      context.stroke();

    }
  }

});

function changeColor(x) {

  if (x === 1) {
    curent_color = '#FF0000';
  } else if (x === 2) {
    curent_color = '#E30058';
  } else if (x === 3) {
    curent_color = '#F0540C';
  } else if (x === 4) {
    curent_color = '#F0CF0C';
  } else if (x === 5) {
    curent_color = '#46BA0B';
  } else if (x === 6) {
    curent_color = '#0C2102';
  } else if (x === 7) {
    curent_color = '#0C2151';
  } else if (x === 8) {
    curent_color = '#2067CF';
  } else if (x === 9) {
    curent_color = '#000000';
  } else if (x === 0) {
    curent_color = '#DD78E3';
  }
}

Answer 1

您確定 changeColor(x) 提供的是整數而不是值的字符串版本嗎？ 由於您使用 3 個等號 (===)，因此您需要值和類型相等。

'1' 是一個字符串 1 是一個整數

'1' == 1 將返回真 '1' === 1 將返回假