HTML5 Canvasでループするパノラマ画像を作成する

はじめに

Canvasを利用して何か開発できないかできないか調査する

サンプルソース

• 無駄にReactのコンポーネント化する

import React , { useEffect } from 'react'

const Canvas= (props) => {


  useEffect(() => {

    var img = new Image();

    img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
    var CanvasXSize = 800;
    var CanvasYSize = 200;
    var speed = 30;
    var scale = 1.05;
    var y = -4.5;    
    var dx = 0.75;
    var imgW;
    var imgH;
    var x = 0;
    var clearX;
    var clearY;
    var ctx;
    
    img.onload = function() {
        imgW = img.width*scale;
        imgH = img.height*scale;
        if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
        if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
        else { clearX = CanvasXSize; }
        if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
        else { clearY = CanvasYSize; }
        //Get Canvas Element
        ctx = document.getElementById('canvas').getContext('2d');
        //Set Refresh Rate
        return setInterval(draw, speed);
    }
    
    function draw() {
        //Clear Canvas
        ctx.clearRect(0,0,clearX,clearY);
        //If image is <= Canvas Size
        if (imgW <= CanvasXSize) {
            //reset, start from beginning
            if (x > (CanvasXSize)) { x = 0; }
            //draw aditional image
            if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
        }
        //If image is > Canvas Size
        else {
            //reset, start from beginning
            if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
            //draw aditional image
            if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
        }
        //draw image
        ctx.drawImage(img,x,y,imgW,imgH);
        //amount to move
        x += dx;
    }
  });

  return (
    <>
      <canvas id="canvas" width="800" height="200"></canvas>
    </>
  )
}

export default Canvas

画面イメージ

• 上記のソースを動かしてみると実際に画像がくるくると動く

次回は

• Canvas上でマウスで絵を書く
• Canvas情報を保存してサーバーにアップする などできるかわからないがやってみる