帆布/ JS：不能改變lineWith而不改變以前的行

Question

我試圖用一個簡單的點擊功能來改變畫布（如油漆）中的手繪圖線。但是當我點擊這個div時，之前的繪圖也會得到新的lineWidth，並且不會保留它的原始狀態。何可以解決這個問題嗎？

的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> 

Answer 1

你需要畫線之前，使用beginPath()方法...

var el = document.getElementById('canvas'); 
 
var ctx = el.getContext('2d'); 
 
var isDrawing; 
 
var redStroke = ctx.strokeStyle = "#FF0000"; 
 

 
el.onmousedown = function(e) { 
 
    isDrawing = true; 
 
    
 
    ctx.beginPath(); //<-- use this 
 
    
 
    ctx.moveTo(e.offsetX, e.offsetY); 
 
}; 
 

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

 
$('#large').click(function() { 
 
    var largeStroke = ctx.lineWidth = 20; 
 
});

canvas { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>