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

Question

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

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

我以前没有想过这个问题。这似乎微不足道，但我目前在画布上以绝对坐标定义了所有对象。我还有用于绘制东西的鼠标事件。当我想放大画布时（通过加倍尺寸说）。内部的所有物体都不能正确放大，鼠标坐标系统也会混乱。

我能想到的唯一解决方案是为所有绘图部件添加比例因子，但这对于大量代码来说非常棘手。还有更好的方法吗？

Answer 1

如果你不介意在你的双尺寸画布上绘制锯齿，那么你可以简单地使用CSS来调整画布的尺寸。然后将每个传入的mouseEvent坐标除以2.

如果您不想在双尺寸帆布上使用锯齿，那么：

• 将画布双倍尺寸元素：canvas.height*=2和context.scale(2,2)这会自动删除所有画布内容。
• 放大画布：[username].domain.com/
• 使用未更改的原始坐标重绘所有绘图部件。 一个快乐的笔记：您无需缩放任何绘图坐标 - context.scale会自动为您执行此操作。
• 将每个传入的mouseEvent坐标除以2。