ウィンドウリサイズ時に canvas 要素の幅を自動調整するための tips

  • ????????????????????

canvas 要素の幅は、通常、width 属性で指定しますが、これをウィンドウのリサイズに合わせて自動的に幅を調節するための Tips です。

以下は canvas を使って市松模様を生成するためのサンプルです。ハイライトされている部分が canvas の描画部分です。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Canvas</title>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div style="margin:30px;width:auto;min-width:200px;max-width:400px;background-color:lightblue;" id="refference">
      <h1>Canvas Test</h1>
      <canvas id="can1" width="400" height="140"></canvas>
      <script type="text/javascript">
      function drawrect(cv,i,j){
        if(((i+j) % 2)==0)
          cv.fillStyle="#ff0000";
        else
          cv.fillStyle="pink";
        cv.fillRect(i*20,j*20,20,20);
      }

      function draw() {
        var canvas = document.getElementById('can1');
        if ( ! canvas || ! canvas.getContext ) {
          return false;
        }
        var ctx = canvas.getContext('2d');

        /* 市松模様を描く */
        for(i=0;i<20;i++){
          for(j=0;j<7;j++)
            drawrect(ctx,i,j);
        }
      }

      $(document).ready(draw);
      </script>
    </div>
  </body>
</html>

このサンプルをブラウザで表示させてみましょう(そのようすを下の図に示しておきます)。ウィンドウの幅が十分にあるうちは特に問題がないように見えますが(上図)、ウィンドウをリサイズすると次のように canvas が親要素からはみ出してしまいます(下図)。


この問題は、「canvas が幅を合わせたい要素(例えば親要素)の width を canvas の属性にセットして再描画する関数」をウィンドウのリサイズイベントにバインドすることで解決することができます。

    <div style="margin:30px;width:auto;min-width:200px;max-width:500px;background-color:lightblue;" id="refference">
      <h1>Canvas Test</h1>
      <canvas id="can1" width="500" height="140"></canvas>
      <script type="text/javascript">
      function drawrect(cv,i,j){
        if(((i+j) % 2)==0)
          cv.fillStyle="#ff0000";
        else
          cv.fillStyle="pink";
        cv.fillRect(i*20,j*20,20,20);
      }

      function draw() {
        thewidth=$("#can1").parent().width();
        $("#can1").attr("width",thewidth);

        var canvas = document.getElementById('can1');
        if ( ! canvas || ! canvas.getContext ) {
          return false;
        }
        var ctx = canvas.getContext('2d');

        /* 市松模様を描く */
        for(i=0;i<20;i++){
          for(j=0;j<7;j++)
            drawrect(ctx,i,j);
        }
      }

      $(document).ready(draw);
      $(window).bind("resize",draw);
      </script>
    </div>

このブログのトップ画像はこのテクニックを使って幅を自動調節しています。

はてなブックマーク - ウィンドウリサイズ時に canvas 要素の幅を自動調整するための tips
Pocket