Question

我想在画布上画一个括号。我能做的很多。问题是，当窗口变得足够小时，支架的比例完全失控并开始向下移动。我尝试添加一个if语句（在下面的代码中）来阻止它在960px处重绘，但它似乎没有任何影响。以及向画布添加最小宽度属性。不幸的是，这些都没有成功。如果您打开小提琴并将“结果”窗口调整为瘦，您可以看到我正在谈论的效果。任何帮助将不胜感激。谢谢。

<canvas id="c" style= "position: absolute; left:0px; top:0px; 
background-color:#646464; min-width: 960px;">
</canvas>

<script>
(function(){
    var htmlCanvas = document.getElementById("c"), context = htmlCanvas.getContext("2d");
    initialize();

    function initialize(){
        window.addEventListener('resize', drawBracket, false);
        drawBracket();      
    }

    function drawBracket(){
    var a = 375
    if(window.innerWidth > 960){ 
        var spreadEnd = (window.innerWidth - window.innerWidth/1.5)
    }
    else{
        var spreadEnd = 320 
    }
    context.beginPath()
    context.moveTo(0, a)
    context.lineTo(spreadEnd, a)
    context.lineTo(spreadEnd, a + 120)
    context.lineTo(spreadEnd + 40, a + 120) 
    context.moveTo(spreadEnd, a + 120)
    context.lineTo(spreadEnd, a - 120)  
    context.lineTo(spreadEnd + 40, a - 120)
    context.stroke()    
    context.closePath()
    }

})();

</script>

https://jsfiddle.net/dpfba47j/

Answer 1

问题是你要在每个窗口调整大小时更改画布的宽度/高度。

    function resizeCanvas() {
       htmlCanvas.width = window.innerWidth;
       htmlCanvas.height = window.innerHeight;
       redraw();
    }

在这里添加条件，如果窗口宽度小于或等于960，则将宽度设置为960.

    function resizeCanvas() {
        if ( window.innerWidth <= 960 ) {
          htmlCanvas.width = 960;
          htmlCanvas.height = // whatever you want
        } else {
          htmlCanvas.width = window.innerWidth;
          htmlCanvas.height = window.innerHeight;
        }
        redraw();
    }

有没有办法添加此画布将停止调整大小的宽度？

1 个答案: