我想把一块帆布放进一个容器里。我希望画布和容器的尺寸一样。为此,我使用了JQuery,但是,这最终证明是为了缩放我的画布。这不是我的本意,尤其是因为我在调整尺寸后画画。在老式的JavaScript中做看似相同的事情给了我预期的结果。
我个人并不期望JQuery的结果,我花了一些时间才发现问题。有人知道他们为什么选择这个实现,为什么它会给出不同的结果吗?我希望通过分享这个我可以节省一些人很多时间!
感谢有人愿意进一步研究修复这个!
下面是一些示例代码:

<html>
<head>
    <title>Canvas resizing</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style type="text/css">
        #container1{
            background-color: green;
            width: 100px;
            height: 100px;
            margin: 50px auto;
        }

        #container2{
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="container1">
        <canvas></canvas>
    </div>
    <div id="container2">
        <canvas></canvas>
    </div>
    <script type="text/javascript">
        function draw (canvas) {
            var context=canvas.getContext("2d");
            context.lineWidth = 5;
            context.rect(25,25,50,50);
            context.stroke();
        }

        $(document).ready(function () {
            //javascript
            var container = document.getElementById('container1');
            var canvas = container.childNodes[1];
            canvas.width = 100;
            canvas.height = 100;
            draw(canvas);

            //jquery
            var container = $('#container2');
            var canvas = container.children()[0];
            $(canvas).width(100);
            $(canvas).height(100);
            draw(canvas);
        });
    </script>
</body>
</html>

最佳答案

jQuery width和height方法是设置CSS宽度和高度属性的缩写别名。使用CSS调整画布大小会导致所看到的缩放、扭曲的外观。纯javascript版本的代码正在设置canvas元素的width和height属性。要在jQuery中实现相同的功能,可以使用:

$(canvas).prop('width', 100)
$(canvas).prop('height', 100)

JSFiddle

关于javascript - jQuery,调整 Canvas 大小而不缩放,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27662327/

10-12 01:35
查看更多