HTML5畫布筆劃寬度不會增量更改

Question

我試圖逐漸更改線寬。 但下面的代碼不起作用：

var csMargin = 10; //Color select margin 
var csSize = 15; 
var csNumber = 4; 

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = (csMargin * 2 + csSize) * csNumber; 
canvas.height = (csMargin * 2 + csSize) * csNumber; 
document.body.appendChild(canvas); 

function DrawCS(){ 
    for(i = 0; i < csNumber; i++){ 
     for(j=0; j< csNumber ;j++){ 
      ctx.rect(csMargin*(i+1)+i*csSize,csMargin*(j+1)+j*csSize,csSize,csSize) 

      //the line width should increase as j increases!! 
      ctx.lineWidth=j*2; 
      ctx.stroke(); 
     } 
    } 
} 

DrawCS(); 

我應該得到一個線寬越厚每一行，但我從每平方相同的厚度。

Answer 1

你之前，你的ctx.rect(...).

忘了ctx.beginPath();然後以避免零寬度使用例如： -

ctx.lineWidth=(j+1)*2; 

<canvas id="canvas"></canvas> 
 
\t 
 
<script> 
 
    var csMargin = 10; //Color select margin 
 
    var csSize = 15; 
 
    var csNumber = 4; 
 

 
    var canvas = document.createElement("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    canvas.width = (csMargin * 2 + csSize) * csNumber; 
 
    canvas.height = (csMargin * 2 + csSize) * csNumber; 
 
    document.body.appendChild(canvas); 
 

 
    function DrawCS(){ 
 
    ctx.stroke(); 
 
    for(i = 0; i < csNumber; i++){ 
 
     for(j=0; j< csNumber ;j++){ 
 
     ctx.beginPath(); \t \t \t \t \t 
 
     ctx.rect(csMargin*(i+1)+i*csSize,csMargin*(j+1)+j*csSize,csSize,csSize); 
 
     ctx.lineWidth=(j+1)*2; 
 
     //the line width should increase as j increases!! \t \t \t \t \t 
 
     ctx.stroke(); 
 
     } 
 
    } 
 
    } 
 

 
    DrawCS(); 
 
</script>