使用结构js调整画布大小

Roh*_*210 9 javascript html5-canvas fabricjs

该应用程序允许用户保存设计并发布,以便其他用户以后可以查看.

原始画布以width = 700和height = 600的比例保存.但是在显示画布时,我想调整画布的大小以适应(350,300)的尺寸.原来的一半.但是,如果我直接应用这些尺寸和加载宽度setWidth()和setHeight(),它将以原始比例加载.

我想要的只是显示具有新尺寸的画布.

JR.*_*JR. 61

如果您使用的是fabric.js库,那还不够.

考虑到'canvas'是fabric.js实例对象,您应该这样做以避免扭曲伪像:

canvas.setWidth( <desired width> );
canvas.setHeight( <desired height> );
canvas.calcOffset();
Run Code Online (Sandbox Code Playgroud)

  • 这应该是公认的答案 (2认同)

Kat*_*Kat -16

之前在这里回答过。

我不确定你一直在尝试什么,但是

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;
Run Code Online (Sandbox Code Playgroud)

应该可以正常工作。

  • 这不适用于 Fabric.Canvas (23认同)