我正在尝试逐步改变我的线宽。 但下面的代码不起作用:
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 的粗细都相同。
最佳答案
您在 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>
关于javascript - HTML5 Canvas 笔划宽度不会增量变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41086308/