javascript - HTML5 Canvas 笔划宽度不会增量变化

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

我应该得到每条线都变粗的线宽，但每个方 block 的粗细都相同。

Answer 1

您在 ctx.rect(...) 之前忘记了 ctx.beginPath();。

然后为了避免零宽度，请使用例如:

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

<canvas id="canvas"></canvas>
	
<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();					
        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!!					
        ctx.stroke();
      }
    }
  }

  DrawCS();
</script>