記事一覧 - ぷろめも

cavasで画像を回転して表示

canvas

回転せずに４つ横に画像を並べて表示するならこんな感じ。

(() => {
    let img = new Image();
    img.addEventListener('load', () => {
        drawImage(img);
    }, false);
    img.src = "./Image.png";
})();

function drawImage(img) {
    let canvas = document.querySelector("#main");
    let context = canvas.getContext("2d");

    let imgSize = 64;
    for (let i = 0; i < 4; i++) {
        let imgX = imgSize * i;
        let imgY = 0;
        context.drawImage(img, imgX, imgY);
    }
}

これを45°ずつ回転させて表示させると

(() => {
    let img = new Image();
    img.addEventListener('load', () => {
        drawImage(img);
    }, false);
    img.src = "./Image.png";
})();

function drawImage(img) {
    let canvas = document.querySelector("#main");
    let context = canvas.getContext("2d");

    let imgSize = 64;
    for (let i = 0; i < 4; i++) {
        let angle = 45 * i;
        let moveX = imgSize / 2 + imgSize * i;
        let moveY = imgSize / 2;

        let imgX = -imgSize / 2;
        let imgY = -imgSize / 2;

        // 描画状態保存
        context.save();

        // 原点を移動させる
        context.translate(moveX, moveY);

        // canvasを回転
        context.rotate(angle);

        // 画像表示
        context.drawImage(img, imgX, imgY);

        // saveの状態に戻す
        context.restore();
    }
}

1ループ目
translateで原点移動

キャンバスを0°回転させて、画像配置(左上の位置を指定)

restoreによって、 fillStyle, strokeStyle, lineWidthなどのスタイルや
translate, rotate, scaleや globalAlpha, clipなどがsaveの状態に戻る
ここではsave後にrotateしただけなので、画像を表示した状態で回転が元の状態に戻ることになる