canvasを使用して画像の回転を実現
3355 ワード
注意点:
必ず変換が完了してから回転できます.デフォルトcanvasは原点位置回転で、原点オフセットを設定することで回転中心を切り替えることができます.
パッケージの方法、第1のimgを伝達して、loadが完成しなければならなくて、第2の伝達は1つの角度に入ります
回転完了を含むcanvasオブジェクトを返します.グラフィックデータを取得する必要がある場合は、
必ず変換が完了してから回転できます.デフォルトcanvasは原点位置回転で、原点オフセットを設定することで回転中心を切り替えることができます.
パッケージの方法、第1のimgを伝達して、loadが完成しなければならなくて、第2の伝達は1つの角度に入ります
function createCanvas(img, deg) {
const canvas = document.createElement("canvas");
canvas.height = img.height;
canvas.width = img.width;
const ctx = canvas.getContext("2d");
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate((deg * Math.PI) / 180);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
return canvas;
}
回転完了を含むcanvasオブジェクトを返します.グラフィックデータを取得する必要がある場合は、
toDataUrl
を使用して取得できます.