设置Canvas的lineWidth为100时绘制矩形仍显示默认线宽是什么原因？

你的代码执行顺序错误导致线宽设置不生效。Canvas 属于立即渲染模式，绘制指令执行后就会直接将图形渲染到画布，后续修改上下文样式属性不会改变已经渲染完成的内容。你现有代码先调用了ctx.strokeRect()绘制矩形，之后才设置ctx.lineWidth = 100，线宽属性无法作用到已经画好的矩形上。

只需要调整代码顺序，在执行绘制动作前设置好对应的样式属性即可，修正后的main.js代码如下：

function init(){
    let ctx = document.querySelector('#canvas').getContext('2d');
    // 先设置线宽
    ctx.lineWidth = 100;
    // 再绘制矩形
    ctx.strokeRect(100,50,200,150);
}

如果需要绘制多个不同线宽的矩形，每次绘制前修改lineWidth属性即可：

function init(){
    let ctx = document.querySelector('#canvas').getContext('2d');
    // 外矩形线宽10
    ctx.lineWidth = 10;
    ctx.strokeRect(100,50,200,150);
    // 内矩形线宽5
    ctx.lineWidth = 5;
    ctx.strokeRect(120,70,160,110);
}

内容的提问来源于stack exchange，提问作者Suraj Thadarai