问题描述
我正在尝试以获得乐趣，但似乎我已经陷入了困境。
I'm trying out Paper.js for fun, but it seems I'm already stuck at the very start.
将 resize =true添加到画布 tag应该使元素与浏览器窗口一样高和宽。但是，这样做会导致一些相当奇怪的行为。
Adding resize="true" to the canvas tag is supposed to make the element as high and wide as the browser window. However, doing that results in some rather strange behavior.
我希望画布在加载页面后立即调整到视口，但它没有这样做，这就是为什么我最初认为它根本没有调整大小。然而，实际发生的事情更加奇怪：画布的默认大小为300x150，当我调整视口大小时，它会慢慢增长 - 但是无限期地。
I expected the canvas to adjust itself to the viewport right after loading the page, but it didn't do so, which is why I initially thought it didn't resize at all. What actually happens, though, is even more bizarre: The canvas starts out at its default size of 300x150, and when I resize the viewport, it grows - slowly, but indefinitely.
为了记录，我尝试使用 data-paper-resize =true或只是调整大小相反，或者使用Chrome而不是Firefox - 一切都无济于事。
For the record, I've tried using data-paper-resize="true" or just resize instead, or using Chrome instead of Firefox - all to no avail.
如果这个问题是由一些莫名其妙的引起的，我不期待答案奇怪的设置在我的最后。但是，我想知道问题是否常见（或者甚至已知存在）并且已知原因和解决方案。
I'm not expecting an answer if this problem is caused by some inexplicably weird setup on my end. I am wondering, however, if the problem is common (or even known to exist at all) and has known causes and solutions.
这是我正在使用的代码：
Here's the code I'm using:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = 'black';
path.moveTo(new Point(120, 120));
path.lineTo(new Point(500, 500));
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
</body>
</html>
推荐答案
将以下CSS添加到您的项目中：
Add the following CSS to your project:
<style type="text/css">
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 100%;
height: 100%;
}
</style>
这篇关于Paper.js不会正确调整画布大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！