Question

我的目标是将图像引入画布的一部分，然后对其进行缩放，移动/平移，还可以选择使其倾斜，旋转并进行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个单独的“转换”。注释？

Answer 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)

HTML的画布变换？仅仅是：首先进行变换，然后绘制到画布中？不，在画布上粘贴图像等进行转换？

1 个答案: