1
我试图用一个简单的点击功能来改变画布(如油漆)中的手绘图线。但是当我点击这个div时,之前的绘图也会得到新的lineWidth,并且不会保留它的原始状态。何可以解决这个问题吗?帆布/ JS:不能改变lineWith而不改变以前的行
的JavaScript
var el = document.getElementById('canvas');
var ctx = el.getContext('2d');
var isDrawing;
var redStroke= ctx.strokeStyle = "#FF0000";
el.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.offsetX, e.offsetY);
//ctx.lineWidth=1;->default
};
el.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
};
el.onmouseup = function() {
isDrawing = false;
};
$('#medium').click(function(){
var mediumStroke=ctx.lineWidth=5;
mediumStroke;
});
$('#large').click(function(){
var largeStroke=ctx.lineWidth=20;
largeStroke;
});
HTML:
<div class="container">
<canvas id="canvas" width="800" height="500"></canvas>
<div class= "stroke">
<p id="medium">Medium Stroke</p>
<p id="large">Thick Stroke</p>
</div>
</div>
再次感谢@maóis:)仍然在这个新手.. – glassraven
不客气:) –
这样做,你正在绘制先前的路径在每个鼠标移动,这将创建文物。清除画布,或者存储以前的坐标,并在每个鼠标移动时创建一个新的路径。 – Kaiido