Fatal编程技术网
  • javascript/
  • Javascript HTML5画布笔划宽度不会增量更改

Javascript HTML5画布笔划宽度不会增量更改

javascript html canvas

Javascript HTML5画布笔划宽度不会增量更改,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试增量更改我的线宽。 但以下代码不起作用： 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.heigh

我正在尝试增量更改我的线宽。 但以下代码不起作用：

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();
我应该得到一个线宽，每一行都变粗，但每一个正方形的线宽都一样

您忘记了一个ctx.beginPath；在您的ctx.rect

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

ctx.lineWidth=(j+1)*2;
var csMargin=10//颜色选择边距 var-csSize=15； var csNumber=4； var canvas=document.createElementcanvas； var ctx=canvas.getContext2d； canvas.width=csMargin*2+csSize*csNumber； canvas.height=csMargin*2+csSize*csNumber； document.body.appendChildcanvas； 函数图{ ctx.stroke； fori=0；i 然后，为了避免零宽度，使用例如：

ctx.lineWidth=(j+1)*2;
var csMargin=10//颜色选择边距 var-csSize=15； var csNumber=4； var canvas=document.createElementcanvas； var ctx=canvas.getContext2d； canvas.width=csMargin*2+csSize*csNumber； canvas.height=csMargin*2+csSize*csNumber； document.body.appendChildcanvas； 函数图{ ctx.stroke； fori=0；i