【javascript】canvasから画像を作成しよう

使用するクラス

HTMLCanvasElement

関数

• getContext(contextType)
• toDataURL()

CanvasRenderingContext2D

関数

• beginPath()
• ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
• stroke()

プロパティ

• strokeStyle

画像を作成する

canvasに描画した情報をpngファイルなどに変換して保存する事ができます。画像を作成ボタンを押すと「create-image.png」というファイルがダウンロードされます。画像をcanvasに貼り付ける方法は 【javascript】画像を読み込んでcanvasに描画しよう をご覧下さい。

window.addEventListener( 'load', function(){
  let canvas = document.querySelector( '#create-canvas145' );
  let context = canvas.getContext( '2d' );
  let x = 150;
  let y = 75;
  let radiusX = 50;
  let radiusY = 10;
  let rotation = 10;
  let startAngle = 0;
  let endAngle = 360;
  
  let id = setInterval(function(){
    context.strokeStyle = 'rgb(' + (rotation + 50) + ', 0, 0)';
    context.beginPath();
    context.ellipse(x, y, radiusX, radiusY, rotation * Math.PI / 180, startAngle, endAngle);
    context.stroke();
    if(180 < rotation)
      clearInterval( id );
    rotation += 12;
  }, 1000 / 60);

  let createImageBtn = document.querySelector( '#create-image145' );
  createImageBtn.addEventListener( 'click', function(){
    let img = canvas.toDataURL();
    let a = document.createElement( 'a' );
    a.href = img;
    a.download = 'create-image.png';
    document.body.appendChild( a );
    a.click();
    document.body.removeChild( a );
  });
});

画像を作成

サンプル

canvasの上で左クリックを押しながら移動すると線が描けます。「画像を作成」ボタンを押すと、canvasに描画されている状態が「create-image.png」ファイルとしてダウンロードできます。また、「一つ前」ボタンを押すと、一つ前の状態に戻れます。