Javascript Paper.js won'；无法正确调整画布的大小

我是为了好玩而尝试的，但我似乎已经在一开始就被卡住了

将

resize=“true”

添加到

canvas

标记应该使元素与浏览器窗口一样高和宽。然而，这样做会导致一些相当奇怪的行为

我希望画布在加载页面后立即调整自身以适应视口，但它没有这样做，这就是为什么我最初认为它根本没有调整大小的原因。然而，实际发生的情况更为奇怪：画布开始时的默认大小为300x150，当我调整视口的大小时，它会增长——缓慢但无限期地增长

作为记录，我尝试过使用

数据纸resize=“true”

或者只是

resize

，或者使用Chrome而不是Firefox，但都没有用

如果这个问题是由我这边的一些莫名其妙的奇怪设置引起的，我并不期待得到答案。然而，我想知道这个问题是否普遍存在（甚至已知存在），是否知道原因和解决方案

以下是我使用的代码：

var path=新路径（）；
path.strokeColor='黑色'；
移动到（新点（120，120））；
lineTo路径（新点（500500））；

将以下CSS添加到项目中：

<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>

html，
身体{
保证金：0；
溢出：隐藏；
身高：100%；
}
/*使用“调整大小”属性将画布缩放为全尺寸*/
画布[调整大小]{
宽度：100%；
身高：100%；
}

我在Github上为此打开了一个问题，似乎这是0.9.22中引入的一个bug@斯卡尔卡兹向我提出了这个问题

以下是未决问题：

---

您也可以在等待修补程序时降级到0.9.21。

另一个选项是-如果使用设置的比例（相对于主体）-覆盖图纸视图：

var pageWidth = document.getElementsByTagName("BODY")[0].clientWidth
var pageHeight = document.getElementsByTagName("BODY")[0].clientHeight
view.size.width = pageWidth * myWidthScale
view.size.height = pageHeight * myHeightScale
center = new Point(width / 2, pageHeight / 2)
view.center = center

---

在添加onResize事件相关代码以及此链接中指定的代码后，尝试将脚本放在关闭标记Try的正前方。恐怕这两个建议都没有起作用。不过，我刚刚注意到，画布确实改变了它的大小，只是没有按照我预期的方式改变——请看更新后的问题。接受解决问题的答案对你来说是件好事。这是对一个常见问题的一个有用的答案，而且这个人花了时间来提供它。@bmacnouton很公平，我只是不确定该接受哪一个。3337813的回答提供了一个有用的解决方法，而ngryman则通过解释这实际上是一个bug，而解决方法并不是您想要做的来提供见解。有什么建议/最佳实践吗？（顺便说一句，我两个都投了赞成票。）看起来是这样的！我想知道为什么CSS是必要的（比如，用户必须处理的事情），为什么文档似乎没有提到它。想要在Paper.js中使用全尺寸画布的人必须手动添加这些样式吗？我只需要全宽度，所以

canvas[resize]{width:100%；height:600px；}

帮我做了这件事。谢谢（我正在使用Paper.js 0.9.22）使用溢出：hidden可能会在以后导致问题。将画布设置为display:block，您可以在不获取滚动条的情况下删除溢出。@user3337813如何以编程方式设置画布[resize]呢？啊，谢谢您的帮助。：）很高兴知道我不是唯一一个有这个问题的人。继github问题之后，这个问题不会得到解决，所以等待补丁不是一个可行的选择。细节还在讨论中，但作者认为画布大小调整是一项CSS任务，而不是纸面任务。我认为他是对的。对于将来遇到同样问题的人来说——图书馆作者知道这是一个问题，但现在还没有机会更新文档以包括CSS的需要。我不会这样做，因为它只会工作一次，如果调整窗口大小，则不会工作。它还绑定到body，并且不会在DOM中的任何其他元素上工作。