当HTML按钮被点击时，JS变量不会更新

我正在一个网页上制作一个绘图/画布应用程序。我想通过按钮更改颜色，但变量不更新颜色。我调试了代码并注意到它会更新，但在画布上绘制时颜色本身并未改变。当HTML按钮被点击时，JS变量不会更新

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

来源

2014-12-02 Alfie B

你尝试到最后一段代码添加到funtion？所以从ctx.lineWidth到var onPaint ....}; ?? – Refilon 2014-12-02 14:55:23

您需要再次改变变量strokeStyle。

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

来源

2014-12-02 14:55:22 qw3n

它的工作，欢呼！ – 2014-12-02 15:00:30

您应该影响ctx.strokeStyle本身。当你第一次设置他的值时，color ='black'，这意味着你将它设置为黑色。然后，即使您更改“颜色”值，它也会保持黑色。因此，在这种情况下，你就必须做到这一点：

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

希望帮助

来源

2014-12-02 14:59:23 Bene

太棒了，谢谢！ – 2014-12-02 15:01:24

当HTML按钮被点击时，JS变量不会更新

回答

相关问题