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

jquery, resize a canvas without scaling

本文关键字：缩放 布大小 调整 jquery      更新时间：2023-09-26

我试图将画布放入容器中。我希望画布的大小与容器相同。为此，我使用了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 width 和 height 属性的简写别名。使用 CSS 调整画布大小会导致您看到缩放、扭曲的外观。纯 JavaScript 版本的代码正在设置 canvas 元素的宽度和高度属性。要在jQuery中实现相同的目标，您可以使用：

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

JSFiddle

相关文章：