在 HTML 中单击按钮时，JS 变量未更新答案

【问题标题】：JS variable not updating when button is clicked in HTML在 HTML 中单击按钮时，JS 变量未更新
【发布时间】：2014-12-02 14:51:40
【问题描述】：

我正在网页上制作绘图/画布应用程序。我想通过按钮更改颜色，但变量没有更新颜色。我调试了代码，发现它确实更新了，但在画布上绘制时颜色本身并没有改变。

HTML：

<div id="sketch">
  <canvas id="paint"></canvas>
</div>

<button onClick="changecolour('blue')">Blue</button>
<button onClick="test()">DEBUG</button>

JavaScript：

var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');

var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

var colour = "black";
function changecolour(choice){
    colour = choice;    
}

function test(click){
    alert("You choose " + colour);
}

ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = colour;

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

【问题讨论】：

您是否尝试将最后一段代码添加到函数中？所以从 ctx.lineWidth 到 var onPaint .... };??

标签： javascript jquery html canvas drawing

【解决方案1】：

您需要再次更改变量strokeStyle。

function changecolour(choice){
    colour = choice;
    ctx.strokeStyle = colour;
}

【讨论】：

【解决方案2】：

您应该影响 ctx.strokeStyle 本身。当你第一次设置他的值时，color = 'black'，这意味着你将它设置为黑色。即使您更改“颜色”值，它也会保持黑色。所以在这种情况下，你只需要这样做：

function changecolour(choice){
    ctx.strokeStyle = choice;
}

希望有帮助

【讨论】：