HTMLキャンバスでの描画シェイプの配置

Question

キャンバス内でイメージをクリップするSVGファイルから生成された複雑なシェイプを持っています。

しかし、すべてのベジェ曲線座標は0,0に基づいています。私たちのシェイプのサイズは、キャンバスのサイズ（ユーザーの画面幅に基づいてスケールされます）に応じて変わります。

既に描画されている図形をキャンバス上の特定の位置に移動する方法はありますか？ ctx.scale（＃、＃）と同じように、描かれた図形をスケーリングしますか？

ありがとうございます！

Answer 1

ctx.translate()を使用して、キャンバス上のアイテムの位置を変更します。

参照：翻訳使用してhttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating

はその後、キャンバスに描かれているすべての位置を変更します。あなただけ一つのことを移動したい場合は、行うことができ、次のいずれか

ctx.translate(x,y); 
// draw something 
ctx.translate(-x,-y); 

またはあなたが行うことができます：

ctx.save(); 
ctx.translate(x,y); 
// draw something 
ctx.restore();