Question

我试图将画布放在容器中。我希望画布与容器的大小相同。为了做到这一点，我使用了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>

Answer 1

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

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

JSFiddle

jquery，调整画布大小而不缩放

1 个答案: