Question

我一直在努力开发一种＆＃34;油漆＆＃34;喜欢使用html / css和javascript的应用程序。我做了一个功能，当你点击一个蜡笔时，它应该改变它绘制的颜色。我用span来制作蜡笔。我对此很新，所以我真的不知道如何调试这个问题

$(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将返回true '1'=== 1将返回false

我无法弄清楚为什么我不能用JavaScript改变蜡笔的颜色

1 个答案: