html画布变换？是否只是：首先进行转换，然后在画布中绘制？不，在画布上粘贴图像等，然后转换它？答案

【问题标题】：html canvas transform ? is it only: first do the transform, and then you draw into the canvas? Not, stick an image or etc on canvas, and transform it?html画布变换？是否只是：首先进行转换，然后在画布中绘制？不，在画布上粘贴图像等，然后转换它？
【发布时间】：2019-11-07 19:33:33
【问题描述】：

我的目标是将图像引入画布的一部分，然后对其进行缩放、移动/平移，并可选择倾斜它，还可以旋转并进行 alpha 更改，这是一种主要的“2d 图像操作”，在一种动画形式，即：从起始状态到目标结束状态随时间变化不大。

好吧，我认为要高效，我应该使用 canvas/2d 上下文转换，https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform - 就像前 3 个一样：缩放、移动/平移和倾斜，“一体化”。我做了一半的代码，现在我正在查看示例并寻求调试它。我看到的所有例子都是做 1）一些变换，远离“统一变换”：

   { a:1, b:0, c: 0, d:1, e:0, f:0 }; // this basic transform does nothing

然后2)画进去。但这与我想要的顺序相反：在画布（图像）上绘制，然后使用上述主要更改（缩放、平移、倾斜、旋转和 alpha）随着时间的推移制作动画。我的问题是：它是否只能“以这种方式工作”，这意味着我必须先在页面上设置（单个）转换，然后“绘制成那个？”

我希望不会……那不会给我想要的东西，我必须“放弃它”，进行 5 次单独的“转换”。注释？

【问题讨论】：

标签： html canvas

【解决方案1】：

是的，只有这样才能工作，画布变换和合成模式和过滤器以及 lineWidth 和 fillStyle 等属性只应用于下一个绘图操作。

画布本身只保存像素信息，没有绘制对象的概念。你的 js 代码必须做这部分。

因此，您可以根据需要简单地每次重绘所有内容：

重置转换，以便我们可以清除ctx.setTransform(1,0,0,1,0,0);
清除画布ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
将转换设置为您的新矩阵ctx.translate(x,y); ctx.scale(s)...
绘制转换后的图形ctx.fill(); ctx.drawImage(...
等待下一帧再做一次requestAnimationFrame(update)

【讨论】：

这“有点伤我的头”，因为我想在倒带时向后运行动画——我正在构建一个播放器，其中“图像”包含文本和图像，而不仅仅是“图片”，很好地传达信息。而当他们倒带时，我想以3-5倍的速度“倒退”。这是我的问题：在您看来，您是否喜欢做 3 个单独的 ctx 操作：缩放、平移和倾斜（很少见），所以实际上大部分是 2（缩放和平移），比转换效率低得多？如果效率不够低，我将“放弃转换”。请评论...
这样想起来容易得多，而且可能以另一种方式调试它，我想我走错了路……？
转换函数对性能的影响非常小。不要费心计算整个矩阵，除非它是代码中的一个可测量的瓶颈。从您的问题来看，您似乎距离测量任何东西还很远。
你是对的，好点：优化后的性能。那么，还有一件事 Kaiido，请想法/cmets？所以曾经使用过PowerPoint吗？你有“幻灯片加动画？”我正在做类似的事情：最低层是（改变）背景，上面的东西移动，以及他们可以放入信息的层（不是画布），以及可以移动的控件上方的层，以及其他一些东西，它是可变的。请考虑一堆图层，就像您在 gimp/photoshop 中使用的一样。如果这一切都“正常工作”，意味着一堆东西，没有“超级快”，这不是游戏。想法？
是的，它应该一切正常。请注意，您甚至可以通过同时使用多个画布来很好地处理图层，并使用drawImage(canvas, x, y) 将它们全部组合到一个可见的画布上。如果您有一些不改变的层，这将大大提高性能。