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

我试图把一个画布放在一个容器中。我希望画布的尺寸与容器相同。为了做到这一点，我使用了JQuery，然而，事实证明这是为了扩展我的画布。这不是我的意图，特别是因为我在调整大小之后画画。以旧时代的JavaScript做看似相同的事情给了我预期的结果。jquery，调整一个画布的大小而不缩放

我个人没有想到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>

来源

2014-12-26 Maarten Arits

jQuery的宽度和高度的方法是用于设定CSS width和height属性速记别名。使用CSS调整画布尺寸会导致缩放，扭曲的外观。您的纯JavaScript代码版本是设置canvas元素的宽度和高度属性。为了达到同样的jQuery中您可以使用：

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

JSFiddle

来源

2014-12-26 22:00:59 Brett

是的，改变画布元素大小，而不是CSS大小。我可能会注意到，更改画布元素的大小将清除画布上的任何现有内容，因此在绘制之前调整大小或在调整大小之后重新绘制内容。给予好评。 – markE

谢谢！调整画布大小是清除它的快速方法吗？据我所知，清除画布中的矩形是最快的方法。你可以使用上下文自己控制视口吗？ –

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

回答

相关问题