Paperjs：在窗口调整大小时，画布的高度和宽度会发生变化。如何防止变化？

Question

我有一个配置了paperjs的简单画布。在调整窗口画布大小时，高度和宽度会发生变化。提前谢谢大家。

HTML

<canvas id="myCanvas"  height="800" width="1000"></canvas>

JS

var InIt = function () {
    var canvas = document.getElementById('myCanvas');
    console.log(canvas);
    paper.setup(canvas);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add([200, -50]));
    paper.view.draw();   
}

window.onload = InIt;

window.onresize=InIt;

截图

屏幕1

屏幕2

您可以在调整大小时看到高度和宽度差异。

Answer 1

不要在init函数中执行paper.setup（）。执行paper.setup（）一次。类似于以下内容（我的test.html文件）：

<script src="./dist/paper-core.js"></script>

<canvas id="canvas" height="800" width="1000"></canvas>

<script>
var  canvas = document.getElementById("canvas");
paper.setup(canvas);
var init = function() {
    console.log(canvas);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100,100);
    path.moveTo(start);
    path.lineTo(start.add([200, -50]));
    paper.view.draw();
}
window.onload = init;
window.onresize = init;
</script>