我想把一块帆布放进一个容器里。我希望画布和容器的尺寸一样。为此,我使用了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/