我能'；我不明白为什么我能'；不要在JavaScript中更改蜡笔的颜色

我一直在尝试使用html/css和javascript开发一个类似“绘画”的应用程序。我做了一个函数，当你点击一支蜡笔时，它会改变它所画的颜色。我用斯潘做蜡笔。我对这个问题很陌生，所以我真的不知道如何调试这个问题

$（文档）.ready（函数（）{
var-ok=false；
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var clickColor=新数组（）；
var curent_color='#000000'；
var context=document.getElementById（'Canvas'）.getContext（“2d”）；
console.log（上下文）；
$（“#画布”）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
ok=正确；
addClick（mouseX，mouseY）；
重画（）；
});
$（'#Canvas'）.mousemove（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
如果（确定！=错误）{
addClick（mouseX、mouseY、true）；
重画（）；
}
});
$（'#Canvas'）.mouseup（函数（e）{
ok=假；
});
$（'#Canvas'）.mouseleave（函数（e）{
ok=假；
});
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
单击颜色。按下（当前颜色）；
}
函数重画（）{
clearRect（0,0，context.canvas.width，context.canvas.height）；
context.strokeStyle=当前颜色；
context.globalAlpha=0.5；
context.lineJoin=“round”；
context.lineWidth=20；
对于（变量i=0；i

您确定changeColor（x）提供的是整数而不是字符串版本的值吗？因为使用3个等号（==），所以要求值和类型相等

“1”是一个字符串 1是一个整数

“1”==1将返回true

---

“1”==1将返回false

我只是将if语句更改为==并查看是否会产生更好的结果。我建议您使用数组，而不是所有那些

if/else if

语句<代码>当前颜色=颜色数组[x]。我没有看到调用

changeColor

。。。

$(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';
  }
}