小编Nat*_*.js的帖子

我正在用画布绘制折线图。图表具有响应性，但线条必须具有固定宽度。

我用 css 让它响应

    #myCanvas{
        width: 80%;
    }

，所以描边被缩放。

我找到的唯一解决方案是使用画布的宽度属性与其实际宽度之间的比例来获取 lineWidth 的值。为了应用它，我在调整大小时清除并绘制画布。

    <canvas id="myCanvas" width="510" height="210"></canvas>

<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");   
    function draw(){
        var canvasattrwidth = $('#myCanvas').attr('width');
        var canvasrealwidth = $('#myCanvas').width();
        // n sets the line width
        var n = 4;
        var widthStroke = n * (canvasattrwidth / canvasrealwidth) ;
        ctx.lineWidth = widthStroke;
        ctx.beginPath();
        ctx.moveTo( 0 , 10 );
        ctx.lineTo( 200 , 100 );
        ctx.stroke();
    }
    $(window).on('resize', function(){
        ctx.clearRect(0, 0, c.width, c.height);
        draw();
    });
    draw(); …