动态调整大小的画布及其内容

Question

我是一名Javascript初学者，请耐心等待。

基本上我正在为使用Javascript的网站制作一个沙盒绘图工具。这是使用画布完成的。我需要做的是能够动态调整画布的大小，但同时要保留画布上的所有内容。

我不认为这个问题已经被问过。它看起来很平凡，但我目前在绝对坐标中定义了画布上的所有对象。我也有鼠标事件来绘制事物。当我想放大画布时（通过加倍大小说）。里面的所有对象都不会被正确放大，并且鼠标坐标系也会混乱。

我唯一能想到的解决方案是在我的所有绘图部件中添加一个比例因子，但这对于很多代码来说非常棘手。有没有更好的办法？

Answer 1

如果您不介意双面大小的画布图纸上的锯齿，那么您可以简单地使用CSS来放大您的画布。然后除以每个传入的MouseEvent由2

协调如果你不想让你的双倍大小的帆布然后在锯齿：

• 双尺寸画布元素：canvas.width*=2和canvas.height*=2这种自动删除所有画布内容。
• 放大画布：context.scale(2,2)
• 使用未更改的原始坐标重新绘制所有绘图部件。 一个快乐的笔记：您不必缩放任何绘图坐标 - context.scale会自动为您绘制。
• 将每个进入的mouseEvent坐标除以2.