我正在尝试Paper.js http://paperjs.org/为了好玩,但似乎我已经在一开始就陷入困境。
Adding resize="true"
to the canvas
标签应该使元素与浏览器窗口一样高和宽。然而,这样做会导致一些相当奇怪的行为。
我希望画布在加载页面后立即根据视口进行调整,但它没有这样做,这就是为什么我最初认为它根本没有调整大小。然而,实际发生的事情更加奇怪:画布开始时的默认大小为 300x150,当我调整视口大小时,它会缓慢但无限地增长.
作为记录,我尝试过使用data-paper-resize="true"
要不就resize
相反,或者使用 Chrome 而不是 Firefox - 都无济于事。
如果这个问题是由我这边一些莫名其妙的奇怪设置引起的,我不期待得到答案。然而,我想知道这个问题是否常见(或者甚至已知存在)并且有已知的原因和解决方案。
这是我正在使用的代码:
<!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 添加到您的项目中:
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)