帆布，对角线较粗

Question

我有以下问题。我试图在我的按钮和滑块上绘制带有凹槽的边框。那工作正常。但我注意到我的对角线是正常线的两倍。

我看到我必须处理画布/标签本身的宽度/高度设置。但我无法让它工作！

也许我真的不明白如何让它发挥作用。请帮助:)

button_canvas_border

slider_canvas_border

这是我的html

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

或

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

两个都不行

还有我的 js

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

也许有人可以帮忙:)

Answer 1

笔划确实从坐标的两侧重叠，这就是为什么您看到有人说您应该平移 0.5，以便 lineWidth = 1 覆盖一个完整像素而不是两半。 （更多关于here）。

在这里，您正在绘制一条 5 像素宽的线，因此您真的不想要该偏移（可以完美渲染 5 像素），即使这不是您的实际问题。
您的绘图位于画布边界的边缘。这意味着只有一半的行是可见的。
要解决此问题，请偏移所有线坐标以考虑其线宽。例如，顶行而不是将其 y 值设置为 0 应该将其设置为 2.5 而没有初始 translate 或 2 如果你真的想保留它。