HTML5のcanvasについてのサンプルを作ってみた。(後半)

今更ながらHTML5のcanvasについて、いくつかサンプルを作ってみました。

これは、このコードでこれが実現しますという事実を再確認するとともに、

いくつか応用を作る際の備忘録という位置づけです。

ではご覧ください。

<!DOCTYPE html>
<!-- 基本構成 以下のサンプルはA,Bを数字に置き換えたものです。-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Canvas</title>
  <head>
  <body>
    <h2>Canvas Sample</h2>
    <ul>
      <li>
        <div>
          <p>Rect</p>
          <canvas width="300" height="300" id="canvasA"></canvas>
        </div>
      </li>
      <li>
        <div>
          <p>DrawImage</p>
          <img src="image.jpg" width="20" height="20" id="patternB" />
          <canvas width="300" height="300" id="canvasB"></canvas>
        </div>
      </li>
    </ul>
  </body>
  <script>
  function drawingCanvasA() {
    // write
  }

  function drawingCanvasB() {
    // write
  }

  document.addEventListener('DOMContentLoaded', function(){
    drawingCanvasA();
  }, false);

  window.addEventListener('load', function(){ // 画像を使っているものはloadイベントを使用する
    drawingCanvasB();
  }, false);
  </script>
</html>

canvasのx値、y値は基本左上を原点として、右方向に正のx値、下方向に正のy値となっている。

・パターンのサンプル(画像を使って塗りつぶし)

  function drawingCanvas8() {
    var canvas = document.querySelector('#canvas8');
    var context = canvas.getContext('2d');
    var img = document.querySelector('#pattern1');
    var pattern = context.createPattern(img, "repeat");
    context.fillStyle = pattern;
    context.beginPath();
    context.rect(0, 0, 100, 100);
    context.fill();
  }

・画像表示のサンプル(元画像の一部の範囲だけを表示)

  function drawingCanvas9() {
    var canvas = document.querySelector('#canvas9');
    var context = canvas.getContext('2d');
    var img = document.querySelector('#pattern2');
    context.drawImage(img, 100, 50, 100, 100, 50, 50, 100, 100);
  }

・レイヤー結合のサンプル(複数のcanvasを重ねて表現)

  function drawingCanvas10() {
    var canvas = document.querySelector('#canvas10');
    var context = canvas.getContext('2d');
    var img = document.querySelector('#pattern3');
    var create_canvas = function(w, h) {
      var layer = document.createElement('canvas');
      layer.width = w;
      layer.height = h;
      return layer;
    };

    var layer1 = create_canvas(canvas.width, canvas.height);
    var layer2 = create_canvas(canvas.width, canvas.height);
    var c1 = layer1.getContext('2d');
    c1.font = 'bold normal 128px Arial';
    c1.textAlign = 'center';
    c1.textBaseline = 'middle';
    c1.fillText('OK', canvas.width / 2, canvas.height / 2);

    var c2 = layer2.getContext('2d');
    var grad = c2.createRadialGradient(canvas.width / 2, canvas.height / 2, 0 ,canvas.width / 2, canvas.height / 2, canvas.width / 2);
    grad.addColorStop(0, 'white');
    grad.addColorStop(1, 'black');
    c2.fillStyle = grad;
    c2.fillRect(0, 0, canvas.width, canvas.height);

    context.drawImage(layer1, 0, 0);
    context.globalCompositeOperation = 'source-in';
    context.drawImage(img, 0, 0);
    context.globalCompositeOperation = 'destination-over';
    context.drawImage(layer2, 0, 0);
  }

・クリップのサンプル(画像を形でクリッピング)

  function drawingCanvas11() {
    var canvas = document.querySelector('#canvas11');
    var context = canvas.getContext('2d');
    var img = document.querySelector('#pattern4');
    var w = canvas.width;
    var h = canvas.height;

    var grad = context.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w / 2);
    grad.addColorStop(0, 'white');
    grad.addColorStop(1, 'black');
    context.fillStyle = grad;
    context.fillRect(0, 0, w, h);

    context.beginPath();
    context.arc(w / 2, h / 2, Math.min(w, h) * 0.8 / 2, 0, Math.PI * 2, true);
    context.clip();
    context.drawImage(img, 0, 0);
  }

・座標変換のサンプル

  function drawingCanvas13() {
    var canvas = document.querySelector('#canvas13');
    var context = canvas.getContext('2d');
    var img = document.querySelector('#pattern6');
    var w = canvas.width;
    var h = canvas.height;

    context.scale(0.5, 0.5);
    context.rotate(20 * Math.PI / 180);
    context.translate(30, 15);

    context.beginPath();
    context.drawImage(img, 0, 0);
  }

・マウスイベントのサンプル(マウスオンすると色が変化)

  function drawingCanvas14() {
    var canvas = document.querySelector('#canvas14');
    var context = canvas.getContext('2d');

    var setPath = function() {
      context.beginPath();
      context.arc(150, 75, 69, 0, Math.PI * 2, true);
      context.closePath();
    }

    var draw = function(flg) {
      context.save();
      context.fillStyle = flg ? '#2ca9e1': '#69b076';
      context.arc(150, 75, 70, 0, Math.PI * 2, true);
      context.fill();
      context.restore();
    }

    var getMousePosition = function(e) {
      var rect = e.target.getBoundingClientRect();
      return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      };
    }

    var isPointInButton = function(e) {
      var pos = getMousePosition(e);
      setPath();
      return context.isPointInPath(pos.x, pos.y);
    }

    draw(false);

    canvas.addEventListener('mousemove', function(e) {
      draw(isPointInButton(e));
    }, false);

    canvas.addEventListener('click', function(e) {
      if (isPointInButton(e)) {
        var c = document.querySelector('#canvas13');
        var data_url = c.toDataURL();
        window.open(data_url, "new Image");
      }
    }, false);
  }

・アニメーションのサンプル(座標変換で回転させている)

  function drawingCanvas15() {
    var canvas = document.querySelector('#canvas15');
    var context = canvas.getContext('2d');
    var w = canvas.width;
    var h = canvas.height;
    var rd = 0;
    var draw = function(rdan) {
      context.save();
      context.fillStyle = '#ffffff';
      context.fillRect(0, 0, w, h);
      context.rotate(rdan * Math.PI / 180);
      context.fillStyle = '#a0d8ef';
      context.fillRect(w / 2 - 50, h / 2 - 50, 100, 100);
      context.restore();
    }
    window.setInterval( function() {
      draw(rd++);
      if (rd == 360) {
        rd = 0;
      }
    }, 50);
  }

デジタル忍者ブログ

デジタル忍者ブログ

HTML5のcanvasについてのサンプルを作ってみた。(後半)