Javascript 画布，对角线更粗

我有以下问题。我试图用我的按钮和滑块上的凹口画一个边框。那很好。但我注意到我的对角线是正常对角线的两倍厚

我看到我必须在画布/标记本身中处理宽度/高度设置。但是我不能让它工作

也许我真的不明白该怎么做。请帮忙：）

那是我的html

<canvas width="1290" height="738" class="slider_canvas" id="slider_canvas" ></canvas>

---

也许有人能帮上忙：）

笔划确实从坐标的两侧重叠，这就是为什么你看到一些人说你应该平移0.5，这样

lineWidth=1

就可以覆盖整个像素，而不是两个半像素。（更多关于这一点）

这里你画的是一条5px宽的线，所以你真的不想要偏移量（5个像素可以渲染得非常好），即使这不是你的实际问题。
您的图形位于画布边界的边缘。这意味着只有一半的线路可见。

---

若要解决此问题，请偏移所有线坐标以考虑其线宽。例如，顶部行的

y

值不应设置为

0

，而应将其设置为

2.5

，不带首字母

translate

，或者设置为

2

，如果您真的想保留它。

非常感谢！我将所有0点更改为2.5，并将高度和宽度添加到-2.5。。工作完美！谢谢：）@timofinas不客气。请看

<canvas class="slider_canvas" id="slider_canvas" ></canvas>

jQuery(document).ready(function($) {
     $('.slider_canvas').each(function(index, canvas) {
        var wrapper_height = $('.nsaw_slider_front_wrapper').height() + 30;
        var wrapper_width = $('.nsaw_slider_front_wrapper').width() + 30;

        /* doesnt matter what i do on the below, its just not working */

        canvas.width = wrapper_width;
        canvas.height = wrapper_height;  

        canvas.style.width = wrapper_width;
        canvas.style.height = wrapper_height;

        canvas.setAttribute('width', wrapper_width);
        canvas.setAttribute('height', wrapper_height); 

        /* doesnt matter what i do on the above, its just not working */

        var point_01_cord = wrapper_width * 0.85;
        var point_02_cord = wrapper_height * 0.25423;
        var point_03_cord = wrapper_width * 0.15;
        var point_04_cord = wrapper_height * 0.74577;

        var ctx = canvas.getContext('2d');
        var gradient = ctx.createLinearGradient(0, 0, 170, 0);
      
        gradient.addColorStop("0", "#0033ff");
        gradient.addColorStop("1" ,"#ffff00"); 

        ctx.strokeStyle = gradient;
        ctx.lineWidth = 5;

        ctx.beginPath();
        ctx.translate(0.5,0.5);
        ctx.moveTo(0,0);
        ctx.lineTo(point_01_cord,0);
        ctx.lineTo(wrapper_width,point_02_cord);

        ctx.lineTo(wrapper_width,wrapper_height);
        ctx.lineTo(point_03_cord,wrapper_height);

        ctx.lineTo(0,point_04_cord);
        ctx.lineTo(0,0);  

        ctx.stroke();
    });
});