缩放图像在HTML5画布

Scaling Images in HTML5 canvas

本文关键字：画布 HTML5 图像 缩放      更新时间：2023-09-26

我有许多对象，它们代表我想在画布上绘制的图像。每个对象都有一个X, Y, Scale属性，以及一个传递画布对象的渲染方法。然后画布标签被传递给每个对象的渲染方法，它们都需要将自己渲染到画布上。

我的问题是缩放是从画布的原点完成的，而不是图像的原点。为了解决这个问题，我尝试了以下方法:

canvas.translate(-this.X, -this.Y);
canvas.scale(this.Scale, this.Scale);
canvas.translate(this.X, this.Y);

上面的代码的问题是，它看起来就像你只能有一个翻译和第三行，应该移动对象回到原来的位置成为翻译时调用drawImage。如果我删除第三行，我得到了正确的缩放原点，但图像被移动到0,0，而不是在正确的位置呈现。

做这种缩放的正确方法是什么?

尝试:

canvas.translate(this.X, this.Y);
canvas.scale(this.Scale, this.Scale);
canvas.translate(-this.X, -this.Y);

但是请记住，这样做你将需要做很多ctxt.save();和ctxt.restore(); s，如果你得到了图像的宽度和高度，你可以简单地做ctxt.drawImage(this.image, this.X, this.Y, this.Width*this.Scale, this.Height*this.Scale);，因为你不需要打乱上下文状态堆栈，它可能更快。

编辑:

变换不影响原点。实际情况是，它们必须以相反的顺序应用。请记住，这些方法只是在转换堆栈中堆叠矩阵的快捷方式。

相关文章：