Javascript canvas

2024-04-272024
32% (117.1/366)
April
87.1% (26.1/30)
Week 17
73.5% (5.1/7)
Day 27 Sat
15.1% (3.6/24)

訪問者

total: 11796
today: 4
yesterday: 7
now: 25

更新

MenuBar

IE 6,7,8 で Canvas を使う †

Google の explorcanvas を使う http://code.google.com/p/explorercanvas/ 。ダウンロードした excanvas.js を次のように指定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    
    <title>Lesson5</title>
   <style type="text/css">

IE9 から Canvas に対応しているので、[if lte IE 8.0] にする
IE9 で Canvas を有効化するためには HTML 5 宣言をする必要がある (<!DOCTYPE html>)

↑

lesson1 線を引く †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson1</title>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}

function draw() {
  // 1. canvas 取得
  var canvas = document.getElementById('canvassample');
  
  // 2. canvas 対応チェック
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  // 3. 2d context 取得 (今のところ 2d しかない)
  var ctx = canvas.getContext('2d');
  
  // 4. Path 開始
  ctx.beginPath();

  // 5. (20,20) へ移動
  ctx.moveTo(20, 20);
  
  // 6. 現在位置から (120,120) へ線を引く
  ctx.lineTo(120, 120);
  
  // 7. 画面に反映 (ctx.stroke() を呼び出すまで画面に表示されない)
  ctx.stroke();
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    直線<br/>
    <canvas id="canvassample" width="140" height="140"></canvas>
  </body>
</html>

↑

lesson2 閉曲線 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson2</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw(1);
  draw(2);
  draw(3);
  draw(4);
}

function draw(exNum) {
  var canvas = document.getElementById('canvassample' + exNum);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // Path開始
  ctx.beginPath();
  
  ctx.moveTo( 20, 20);
  ctx.lineTo(100, 30);
  
  switch(exNum) {
  case 1:
    ctx.strokeStyle = 'red';
    ctx.lineTo(130, 130);
    ctx.lineTo(10, 50);
    break;
  case 2:
    ctx.strokeStyle = 'green';
    // 中心(130,130) 半径 10 の円を通って (10, 50) 方向へ抜ける直前まで
    ctx.arcTo(130, 130, 10, 50, 10);
    ctx.lineTo(10, 50);
    break;
  case 3:
    ctx.strokeStyle = 'blue';
    // 始点 と (130,130) と (10,50) を通る二次曲線
    ctx.quadraticCurveTo(130, 130, 10, 50);
    break;
  case 4:
    ctx.strokeStyle = 'orange';
    // 始点 と (100,130) と (130,100) と (10,50) を通る三次曲線
    ctx.bezierCurveTo(100, 130, 130, 100, 10, 50);
  }
  
  // Path終了 : 始点(10,50)-終点(20,20) を直線で結んで閉曲線にする
  ctx.closePath();
  
  ctx.stroke();
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    <table border="0">
      <tbody>
        <tr>
          <td>直線:<br/><canvas id="canvassample1" width="140" height="140"></canvas></td>
          <td>円弧:<br/><canvas id="canvassample2" width="140" height="140"></canvas></td>
          <td>2次ペジェ曲線: <br/><canvas id="canvassample3" width="140" height="140"></canvas></td>
          <td>3次ペジェ曲線: <br/><canvas id="canvassample4" width="140" height="140"></canvas></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

↑

lesson3 塗りつぶし・色 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson2</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw(1);
  draw(2);
  draw(3);
  draw(4);
}

function draw(exNum) {
  var canvas = document.getElementById('canvassample' + exNum);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // Path開始
  ctx.beginPath();
  
  ctx.moveTo( 20, 20);
  ctx.lineTo(100, 30);
  
  switch(exNum) {
  case 1:
    // 線の描画色を赤色にする
    ctx.strokeStyle = 'red';
    ctx.lineTo(130, 130);
    ctx.lineTo(10, 50);
    break;
  case 2:
    // 線の描画色を緑色にする
    ctx.strokeStyle = 'green';
    ctx.arcTo(130, 130, 10, 50, 10);
    ctx.lineTo(10, 50);
    break;
  case 3:
    // 線の描画色を青色にする
    ctx.strokeStyle = 'blue';
    ctx.quadraticCurveTo(130, 130, 10, 50);
    break;
  case 4:
    // 線の描画色をオレンジ色にする
    ctx.strokeStyle = 'orange';
    ctx.bezierCurveTo(100, 130, 130, 100, 10, 50);
  }
  
  ctx.closePath();
  
  // 塗りつぶし色をアイボリーにする
  ctx.fillStyle = 'ivory';
  // 塗りつぶし
  ctx.fill();
  ctx.stroke();
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    <table border="0">
      <tbody>
        <tr>
          <td>直線:<br/><canvas id="canvassample1" width="140" height="140"></canvas></td>
          <td>円弧:<br/><canvas id="canvassample2" width="140" height="140"></canvas></td>
          <td>2次ペジェ曲線: <br/><canvas id="canvassample3" width="140" height="140"></canvas></td>
          <td>3次ペジェ曲線: <br/><canvas id="canvassample4" width="140" height="140"></canvas></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

色は、CSS の color 形式。"#ffffff", "rgb(255,255,255)", "rgba(255,255,255,1.0)", "red" の文字列で指定する

↑

lesson4 矩形 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson4</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // (20,20) から 縦60、横60 の矩形を塗りつぶす
  ctx.fillRect(20, 20, 60, 60);

  // (40,40) から 縦60、横60 の矩形をクリアする
  ctx.clearRect(40, 40, 60, 60);

  // (40,40) から 縦60、横60 の矩形を縁取りする
  ctx.strokeRect(40, 40, 60, 60);
  
  // これらは、
  // ctx.beginPath();
  // ctx.rect(x,y,widht,height);
  // ctx.stroke();
  // などと同等
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    矩形<br/>
    <canvas id="canvassample" width="200" height="200"></canvas>
  </body>
</html>

↑

lesson5 円弧、複数の色で塗り分け †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson5</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // ※ ここでは、context はデフォルト状態 (線色＝黒、塗りつぶし＝白)

  ctx.save();    // 現在の context の状態を退避する
  // -▼--------- ここから、線色＝赤、塗りつぶし＝ピンク ---------▼-
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.fillStyle = 'pink';
  
  // 中心 (100,100) 半径 50 の円弧。
  // 開始角 1.5π(270°) 終了角 1.8π(324°) 時計回り。
  // 0°は東方向
  ctx.arc(100,100,50,1.5 * Math.PI,1.8 * Math.PI);
  
  // 中心 (100,100) まで線を引く
  ctx.lineTo(100,100);
  
  // (100,100) からこのPathの開始点（=円弧の開始点)まで線を引いて閉曲線にする
  ctx.closePath();
  
  ctx.stroke();
  ctx.fill();
  // -▲--------- ここまで、線色＝赤、塗りつぶし＝ピンク ---------▲-
  ctx.restore(); // context の状態を復元する
  
  // ※ ここでは、context はデフォルト状態 (線色＝黒、塗りつぶし＝白)
  
  ctx.save();    // 現在の context の状態を退避する
  // -▼--------- ここから、線色＝青、塗りつぶし＝シアン ---------▼-
  ctx.beginPath();
  ctx.strokeStyle = 'blue';
  ctx.fillStyle = 'cyan';
  
  // 中心 (100,100) 半径 50 の円弧。
  // 開始角 1.5π(270°) 終了角 1.8π(324°) "反"時計回り。
  // 第六引数は anticlockwise (反時計回りフラグでデフォルト値 false)
  ctx.arc(100,100,50,1.5 * Math.PI,1.8 * Math.PI,true);
  
  ctx.lineTo(100,100);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
  // -▲--------- ここまで、線色＝青、塗りつぶし＝シアン ---------▲-
  ctx.restore(); // context の状態を復元する
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    円弧、複数の色で塗り分け<br/>
    <canvas id="canvassample" width="200" height="200"></canvas>
  </body>
</html>

Canvas では、現時点での context (文脈) を使って描画を行う

一つの図形を書くときには ctx.save() で現在の context を待避し、書き終わったら ctx.restore() で元に戻すのが一般的なやり方

ctx.save();
ctxに属性を付加する(色など)
なんか書く
ctx.restore();

ctx.save();
ctxに属性を付加する(線の太さなど)
なんか書く
ctx.restore();

ctx.save() / ctx.restore() はスタックなので、共通的な定義を入れ子で書ける

ctx.save()'
ctx.font = '20px sans-serif';

ctx.save();
ctxに属性を付加する(色など)
なんか書く
ctx.restore();

ctx.save();
ctxに属性を付加する(線の太さなど)
なんか書く
ctx.restore();

ctx.restore()

↑

lesson6 透明色 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson6</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  ctx.save();
  ctx.strokeStyle = 'red';
  ctx.fillStyle = 'pink';
  ctx.beginPath();
  ctx.arc(75,75,50,0,2*Math.PI);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  
  ctx.save();
  ctx.strokeStyle = 'blue';
  ctx.fillStyle = 'rgba(80,80,255,0.5)';
  ctx.beginPath();
  ctx.rect(75,75,100,100);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    透明色<br/>
    <canvas id="canvassample" width="200" height="200"></canvas>
  </body>
</html>

↑

lesson7 文字 (align, baseline, stroke, fill) + canvasの大きさ取得 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson7</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // 画面全体にガイドラインを引く
  // 横長 : canvas.width
  // 縦長 : canvas.height
  ctx.save();
  ctx.strokeStyle = 'rgb(200,200,200)';
  for( y = 30; y < canvas.height; y+=30 ){
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }
  ctx.beginPath();
  ctx.moveTo(200,0);
  ctx.lineTo(200,canvas.height);
  ctx.stroke();
  ctx.restore();
  
  // テキストの属性を変えて表示してみる
  ctx.font = '15px monospace';
  y = 30;
  ['start','end','left','right','center'].forEach(function(textAlign){
    ctx.save();
    ctx.textAlign = textAlign;
    ctx.fillText(textAlign + ',alphabetic', 200, y);
    ctx.restore();
    y += 30;
  });
  ['top','hanging','middle','alapabetic','ideographic','bottom'].forEach(function(textBaseline){
    ctx.save();
    ctx.textBaseline = textBaseline;
    ctx.fillText('start,' + textBaseline, 200, y);
    ctx.restore();
    y += 30;
  });
  
  ctx.save();
  ctx.strokeStyle = 'red';
  ctx.strokeText('Stroke Text', 200, y);
  ctx.restore();
  y += 30;
  
  ctx.save();
  ctx.fillStyle = 'blue';
  ctx.fillText('Fill Text', 200, y);
  ctx.restore();
  y += 30;
  

}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    文字 (align, baseline, stroke, fill) + canvasの大きさ取得 <br/>
    <canvas id="canvassample" width="400" height="400"></canvas>
  </body>
</html>

↑

lesson8 文字 (font, maxwidth, 表示幅の推定) †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson8</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  ctx.save();
  ctx.strokeStyle = 'rgb(200,200,200)';
  for( y = 10; y < canvas.height; y+=10 ){
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }
  for( x = 10; x < canvas.width; x+=10 ){
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.stroke();
  }
  ctx.restore();
  
  var SAMPLE_TXT = 'ずっと夢を見て安心してた';
  y = 30;
  
  y = setText(ctx, SAMPLE_TXT, '22px sans-serif', y);
  y = setText(ctx, SAMPLE_TXT, '22px serif', y);
  y = setText(ctx, SAMPLE_TXT, '22px monospace', y);
  y = setText(ctx, SAMPLE_TXT, '22px \'ヒラギノ角ゴ Pro W3\',\'メイリオ\',sans-serif', y);
}
function setText(ctx, text, font, y) {
  ctx.save();
  ctx.font = font;
  
  // TextMetrics : グラフィックとして表示されるときの表示属性
  // 今のところ TextMetrics.width しかない
  txtMetrics = ctx.measureText(text)
  
  ctx.fillText(font, 30, y);

  y += 30;
  ctx.fillText(text, 50, y);
  ctx.fillText(txtMetrics.width + 'px', 350, y);
  
  y += 30;
  // テキストの横幅を最大100pxに縮める
  ctx.fillText(text, 50, y, 100);
  ctx.fillText('100px (max width)', 350, y);
  ctx.restore();
  
  return y + 30;
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    文字 (font, maxwidth, 表示幅の推定) <br/>
    <canvas id="canvassample" width="600" height="400"></canvas>
  </body>
</html>

↑

lesson9 重ね合わせ †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson9</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw(0,'source-over');
  draw(1,'source-in');
  draw(2,'source-out');
  draw(3,'source-atop');
  draw(4,'destination-over');
  draw(5,'destination-in');
  draw(6,'destination-out');
  draw(7,'destination-atop');
  draw(8,'lighter');
  draw(9,'copy');
  draw(10,'xor');
  draw2(11, 0.5);

}

function draw(num, op) {
  var canvas = document.getElementById('canvassample' + num);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // 元画像 (青い四角)
  ctx.save();
  ctx.strokeStyle = 'yellow';
  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.rect(25, 25, 100, 100);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  
  // 重ね合わせ方法の変更
  ctx.globalCompositeOperation = op;
  
  // 重ね合わせ画像 (赤い丸)
  ctx.save();
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2*Math.PI);
  ctx.fill();
  ctx.restore();
  
  // ※ 重要 ※
  // 重ね合わせ方法をデフォルトに戻す
  // globalCompositeOperation は、global なので、save()/restore() 
  // では元に戻らない
  ctx.globalCompositeOperation = 'source-over';
  
  ctx.save();
  ctx.font = '20px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText(op, canvas.width / 2, 0);
  ctx.restore;
}

function draw2(num, alpha) {
  var canvas = document.getElementById('canvassample' + num);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // α値の変更
  ctx.globalAlpha = alpha;

  
  // 元画像 (青い四角)
  ctx.save();
  ctx.strokeStyle = 'yellow';
  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.rect(25, 25, 100, 100);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  
  // 重ね合わせ画像 (赤い丸)
  ctx.save();
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2*Math.PI);
  ctx.fill();
  ctx.restore();
  
  // ※ 重要 ※
  // 重ね合わせ方法をデフォルトに戻す
  // globalAlpha は、global なので、save()/restore() 
  // では元に戻らない
  ctx.globalAlpha = 1;
  
  ctx.save();
  ctx.font = '20px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('globalAlpha', canvas.width / 2, 0);
  ctx.restore;
}

/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    <table border="0">
      <tbody>
        <tr>
          <td><canvas id="canvassample0" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample1" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample2" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample3" width="200" height="200"></canvas></td>
        </tr>
        <tr>
          <td><canvas id="canvassample4" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample5" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample6" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample7" width="200" height="200"></canvas></td>
        </tr>
        <tr>
          <td><canvas id="canvassample8" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample9" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample10" width="200" height="200"></canvas></td>
          <td><canvas id="canvassample11" width="200" height="200"></canvas></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

↑

lesson10 直線の端 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson10</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  ctx.save();
  ctx.font = '15px sans-serif';
  ctx.textBaseline = 'middle';
  
  // 補助線
  drawLine(ctx,  20, 0,  20, canvas.height, 1, 'butt'  , 'red');
  drawLine(ctx,  60, 0,  60, canvas.height, 1, 'butt'  , 'pink');
  drawLine(ctx,  70, 0,  70, canvas.height, 1, 'butt'  , 'pink');
  drawLine(ctx,  80, 0,  80, canvas.height, 1, 'butt'  , 'red');
  drawLine(ctx,  90, 0,  90, canvas.height, 1, 'butt'  , 'pink');
  drawLine(ctx, 100, 0, 100, canvas.height, 1, 'butt'  , 'pink');
  
  // lineCap
  drawLine(ctx, 20, 20, 80, 20, 15, 'butt'  , 'gray', 'butt cap (default)');
  drawLine(ctx, 20, 40, 80, 40, 15, 'round' , 'gray', 'round cap');
  drawLine(ctx, 20, 60, 80, 60, 15, 'square', 'gray', 'square cap');
  
  // lineJoin
  drawJoin(ctx, 20, 100, 80, 120, 20, 140, 15, 'round', 'gray', 'round join');
  drawJoin(ctx, 20, 160, 80, 180, 20, 200, 15, 'bevel', 'gray', 'bevel join');
  drawJoin(ctx, 20, 220, 80, 240, 20, 260, 15, 'miter', 'gray', 'miter join (default)');
  
  // miterLimit
  // miter join のとき、とんがり部分が、miterLimi * (lineWidth / 2) 以上になると
  // とんがり部分が削られて bevel と同じ描画結果になる (デフォルト値は10)
  ctx.save();
  ctx.miterLimit = 3.0;
  drawJoin(ctx, 20, 280, 80, 300, 20, 320, 15, 'miter', 'gray', 'miterLimit = 3.0');
  ctx.restore();
  
  ctx.save();
  ctx.miterLimit = 4.0;
  drawJoin(ctx, 20, 340, 80, 360, 20, 380, 15, 'miter', 'gray', 'miterLimit = 4.0');
  ctx.restore();
  
  ctx.restore();
}

function drawLine(ctx, x1, y1, x2, y2, width, cap, color, title) {
  ctx.save();
  
  ctx.lineWidth = width;
  ctx.lineCap = cap;
  ctx.strokeStyle = color;
  
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  
  ctx.restore();
  
  if(title) {
    ctx.fillText(title, x2 + 30, y2);
  }
}

function drawJoin(ctx, x1, y1, x2, y2, x3, y3, width, join, color, title) {
  ctx.save();
  
  ctx.lineWidth = width;
  ctx.lineJoin = join;
  ctx.strokeStyle = color;
  
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.stroke();
  
  ctx.restore();
  
  if(title) {
    ctx.fillText(title, x2 + 30, y2);
  }
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    直線<br/>
    <canvas id="canvassample" width="300" height="400"></canvas>
  </body>
</html>

↑

lesson11 グラデーション、パターン †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson4</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var DIR_H = 1; // 01(2)
var DIR_W = 2; // 10(2)
var FILL_IMG = new Image();

window.onload = function() {
  // 塗りつぶし用パターンの読み込み
  FILL_IMG.src = "tile.png?" + new Date().getTime();
  FILL_IMG.onload = function() {
    draw();
  }
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // ----- 横方向のグラデーション
  drawLinearGradient(ctx,   0,   0, 90, 90, DIR_W, 'darkred','red','darkred');
  
  // ----- 縦方向のグラデーション
  drawLinearGradient(ctx, 100,   0, 90, 90, DIR_H, 'darkred','red','darkred');

  // ----- ななめ方向のグラデーション
  drawLinearGradient(ctx, 200,   0, 90, 90, DIR_H + DIR_W, 'darkred','red','darkred');
  
  // ----- 円形のグラデーション
  drawRadialGradient(ctx);
  
  // ----- パターン塗りつぶし
  drawPatternFill(ctx);
}

function drawLinearGradient(ctx, x, y, w, h, dir, c1, c2, c3) {
  ctx.save();
  
  var gStartX = x;
  var gStartY = y;
  var gEndX   = ((dir & DIR_W) == DIR_W) ? (x + w) : x;
  var gEndY   = ((dir & DIR_H) == DIR_H) ? (y + h) : y;
  
  // グラデーションのガイドとなる直線を引数に CanvasGradient オブジェクトを作る
  var grad  = ctx.createLinearGradient(gStartX, gStartY, gEndX, gEndY);
  
  // ガイド上の色を案分する (gStartX,gStartY)=c1, (gEndX,gEndY)=c1c3, 真ん中:c2)
  grad.addColorStop(0.0, c1);
  grad.addColorStop(0.5, c2);
  grad.addColorStop(1.0, c3);
  
  // 塗りつぶし色に CanvasGradient オブジェクトを設定
  ctx.fillStyle = grad;
  
  // 後は普通の閉曲線の塗りつぶし
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.closePath();
  
  ctx.fill();
  ctx.restore();
}

function drawRadialGradient(ctx) {
  ctx.save();
  
  // グラデーションのガイドとなる二つの円を引数に CanvasGradient オブジェクトを作る
  // 内周 中心(145,145) 半径  5
  // 外周 中心(145,145) 半径 45
  var grad  = ctx.createRadialGradient(45, 145, 5, 45, 145, 45);
  
  // 内周の色と外周の色と、中間地点の色を設定する
  // 内周の内側は内周の色、外周の外側は外周の色になる
  grad.addColorStop(0.0, 'darkred');
  grad.addColorStop(0.5, 'red');
  grad.addColorStop(1.0, 'darkred');
  
  // 塗りつぶし色に CanvasGradient オブジェクトを設定
  ctx.fillStyle = grad;
  
  // 後は普通の閉曲線の塗りつぶし
  ctx.beginPath();
  ctx.rect(0, 100, 90, 90);
  ctx.closePath();
  
  ctx.fill();
  ctx.restore();
}

function drawPatternFill(ctx) {
  ctx.save();
  
  // Image の繰り返しで塗りつぶす CanvasPattern オブジェクトを作る
  // 繰り返しのデフォルト値は 'repeat' (第二引数未指定で 'repeat')。
  // そのほかに 'repeat-x', 'repeat-y', 'no-repeat'を指定できる。
  var ptrn  = ctx.createPattern(FILL_IMG, 'repeat');
  
  // 塗りつぶし色に CanvasPattern オブジェクトを設定
  ctx.fillStyle = ptrn;
  
  // 後は普通の閉曲線の塗りつぶし
  ctx.beginPath();
  ctx.arc(145, 145, 45, 0, 2 * Math.PI);
  ctx.closePath();
  
  ctx.fill();
  ctx.restore();
}

/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    グラデーション<br/>
    <canvas id="canvassample" width="300" height="200"></canvas>
  </body>
</html>

↑

lesson12 Image †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson12</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var GIT_IMG = new Image();

window.onload = function() {
  // 描画イメージの読み込み
  GIT_IMG.src = "git.png?" + new Date().getTime();
  GIT_IMG.onload = function() {
    draw();
  }
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // (10,10) に画像を描画
  ctx.fillText('元画像', 10, 8);
  ctx.drawImage(GIT_IMG, 10, 10);
  
  // (10,270) に 横幅 GIT_IMG.width * 0.5 , 縦長 GIT_IMG.height * 0.5 に拡大・縮小して描画
  ctx.fillText('拡大縮小', 10, 268);
  ctx.drawImage(GIT_IMG, 10, 270, GIT_IMG.width * 0.5 , GIT_IMG.height * 0.5);
  
  // 元画像の (10,10)-(160,100) を (180,270) に 横幅 150, 縦長 100 に拡大・縮小して表示
  ctx.fillText('トリミング', 180, 268);
  ctx.drawImage(GIT_IMG, 10, 10, 160, 100, 180, 270, 150, 100);
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    イメージ<br/>
    <canvas id="canvassample" width="400" height="400"></canvas>
  </body>
</html>

ctx.drawImage(img, x, y) には、HTMLImageElement? のほかに HTMLCanvasElement?、HTMLVideoElement? を指定できる

↑

lesson13 ピクセル操作 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson13</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // 図形の描画
  ctx.save();
  ctx.strokeStyle = 'red';
  ctx.fillStyle = 'pink';
  ctx.beginPath();
  ctx.arc(75,75,50,0,2*Math.PI);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  
  ctx.save();
  ctx.strokeStyle = 'blue';
  ctx.fillStyle = 'cyan';
  ctx.beginPath();
  ctx.rect(75,75,100,100);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  
  // (30,30)-(90,90) の範囲を ImageData として取得
  // 横幅 imgData.width / 縦長 imgData.height
  var imgData = ctx.getImageData(10,50,175,100);
  
  // ImageData から CanvasPixelArray を取得して、単色化する
  // 0123 4567 89...
  // RGBA RGBA RG... (それぞれ 0～255)
  var pixArray = imgData.data;
  for(cnt = 0; cnt < pixArray.length; cnt+=4){  
    var red   = pixArray[cnt];
    var green = pixArray[cnt+1];
    var blue  = pixArray[cnt+2];
    var alpha = pixArray[cnt+3];
    
    var brightness = (red + green + blue) / 3;
    
    var row   = Math.floor(cnt / 4 / imgData.width);
    if (row < (imgData.height * 0.25)) {
	  pixArray[cnt]   = brightness;
	  pixArray[cnt+1] = brightness * 0.7;
	  pixArray[cnt+2] = brightness * 0.7;
	} else if (row < (imgData.height * 0.5)) {
	  pixArray[cnt]   = brightness * 0.7;
	  pixArray[cnt+1] = brightness;
	  pixArray[cnt+2] = brightness * 0.7;
	} else if (row < (imgData.height * 0.75)) {
	  pixArray[cnt]   = brightness * 0.7;
	  pixArray[cnt+1] = brightness * 0.7;
	  pixArray[cnt+2] = brightness;
	} else {
	  pixArray[cnt]   = brightness;
	  pixArray[cnt+1] = brightness;
	  pixArray[cnt+2] = brightness;
    }
    pixArray[cnt+3] = alpha; 
  }
  
  // ImageData を canvas に貼り付ける
  ctx.putImageData(imgData,200,50);
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    ピクセル操作<br/>
    <canvas id="canvassample" width="400" height="200"></canvas>
  </body>
</html>

canvas に表示されている内容を imagedata として取り出す
```
imagedata = context . getImageData(sx, sy, sw, sh);
```

imagedata を新たに作成する

imagedata = context . createImageData(sw, sh);

imagedata から imagedata を作成する (コピー)
```
imagedata = context . createImageData(imagedata);
```
context . putImageData?(imagedata, dx, dy) で、image 全体を canvas に貼り付けるほかに、クリッピングして貼り付けることができる
```
context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])
```

↑

lesson14 閉曲線の内側？外側？ †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson14</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // 円を塗りつぶす
  ctx.save();
  ctx.strokeStyle = 'red';
  ctx.fillStyle = 'yellow';
  ctx.beginPath();
  ctx.arc(75,75,50,0,2*Math.PI);
  ctx.stroke();
  ctx.fill();
  
  for (x = 0; x < canvas.width; x+=20) {
    for (y = 0; y < canvas.height; y+=20) {
      
      // context のカレントパスは円
      // (x,y) が 円 の内側か外側かを判定
      if (ctx.isPointInPath(x,y)) {
        // context のカレントパスを待避 <-- 重要
        ctx.save();
        ctx.fillStyle = 'lightgreen';
        ctx.fillRect(x,y,5,5);
        // ※ この時点での context のカレントパスは黄緑色の四角
        ctx.restore();
        // context のカレントパスを円に戻す <-- 重要
      } else {
        // context のカレントパスを待避 <-- 重要
        ctx.save();
        ctx.fillStyle = 'pink';
        ctx.fillRect(x,y,5,5);
        // ※ この時点での context のカレントパスはピンク色の四角
        ctx.restore();
        // context のカレントパスを円に戻す <-- 重要
      }
    }
  }
  
  ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    閉曲線の内側？外側？<br/>
    <canvas id="canvassample" width="200" height="200"></canvas>
  </body>
</html>

↑

lesson15 Transform †

context.transform(m11, m12, m21, m22, dx, dy)
- すでに描画されている図形を移動するのではなく、context の座標系を移動する (普通にイメージする操作と違う)
- transform() を実行したあとに図形を描画すると、移動された座標系で描画される
  
  \(\left( \begin{array}{c} x' \\ y' \\ 1 \end{array} \right) = \left( \begin{array}{ccc} m_{11} & m_{21} & d_{x} \\ m_{12} & m_{22} & d_{y} \\ 0 & 0 & 1 \end{array} \right) \left( \begin{array}{c} x \\ y \\ 1 \end{array} \right) \)
- 原点中心の回転＋平行移動
  
  \(\left( \begin{array}{ccc} cos\theta & -sin\theta & d_{x} \\ sin\theta & con\theta & d_{y} \\ 0 & 0 & 1 \end{array} \right) \)
  
  ※グラフィックでは Y 軸が下向き
- 原点中心の拡大・縮小＋平行移動
  
  \(\left( \begin{array}{ccc} s_{x} & 0 & d_{x} \\ 0 & s_{y} & d_{y} \\ 0 & 0 & 1 \end{array} \right) \)
- 平行移動
  
  \(\left( \begin{array}{ccc} 1 & 0 & d_{x} \\ 0 & 1 & d_{y} \\ 0 & 0 & 1 \end{array} \right) \)
context.transform() を 2 回実行すると、それらが掛け合わされた座標系になる
```
context.transform(m11, m12, m21, m22, dx, dy);
context.transform(n11, n12, n21, n22, dx, dy);
```
context に、指定した変換行列のみを設定したい場合には setTransform(m11, m12, m21, m22, dx, dy); を使う
回転、拡大・縮小、移動の変換行列を設定するラッパー関数がある
- 回転 context.rotate(angle);
- 拡大 context.scale(x, y);
- 移動 context.translate(x, y);

サンプルプログラム

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson4</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // 赤：元の矩形
  ctx.strokeStyle = 'red';
  ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
  
  // 青：0.1π 回転
  ctx.rotate(0.1 * Math.PI);
  ctx.strokeStyle = 'blue';
  ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
  
  // 緑：(120,0) 平行移動
  ctx.translate(120, 0);
  ctx.strokeStyle = 'green';
  ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
  
  // 橙：横方向に 0.5 倍、縦方向に 2.0 倍
  ctx.scale(0.5, 2.0);
  ctx.strokeStyle = 'orange';
  ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    変形<br/>
    <canvas id="canvassample" width="300" height="200"></canvas>
  </body>
</html>

↑

lesson16 Shadow †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson16</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  drawCircle(ctx, 'green', 'darkgreen', 90 , 100);
  drawCircle(ctx, 'blue' , 'darkblue' , 130,  50);
  drawCircle(ctx, 'red'  , 'darkred'  , 50 ,  50);
}

function drawCircle(ctx, color, shadow, x, y) {
  ctx.save();
  // ぼかしのレベル
  ctx.shadowBlur = 10;
  // ぼかしの幅
  ctx.shadowOffsetX = 7;
  ctx.shadowOffsetY = 7;
  // ぼかしの色
  ctx.shadowColor = shadow;
  
  // 塗りつぶしの色
  ctx.fillStyle = color;
  
  ctx.beginPath();
  ctx.arc(x, y, 50, 0, 2*Math.PI);
  ctx.fill();
  ctx.restore();	
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    影<br/>
    <canvas id="canvassample" width="200" height="200"></canvas>
  </body>
</html>

↑

lesson17 クリッピング †

[source] [reload]

閉曲線をクリップに指定すると、以降このクリップの中にしか描画が行われない

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson17</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // 星形の閉曲線をクリップに指定
  clipStar(ctx, 100, 90, 75, 30);
  
  // 緑・青・赤の円を描く
  drawCircle(ctx, 'green', 'darkgreen', 90 , 100);
  drawCircle(ctx, 'blue' , 'darkblue' , 130,  50);
  drawCircle(ctx, 'red'  , 'darkred'  , 50 ,  50);
}

function clipStar(ctx, x, y, r1, r2) {
	ctx.beginPath();
	ctx.moveTo(x + r2 * Math.sin(0) , y + r2 * Math.cos(0));	
	var angle = 2 * Math.PI / 10;
	for (cnt = 1; cnt < 10; cnt++) {
	  if (cnt % 2 == 0) {
	    ctx.lineTo(x + r2 * Math.sin(angle * cnt), y + r2 * Math.cos(angle * cnt));
	  } else {
	    ctx.lineTo(x + r1 * Math.sin(angle * cnt), y + r1 * Math.cos(angle * cnt));		  
	  }
	}
	ctx.closePath();
	ctx.clip();
}

function drawCircle(ctx, color, shadow, x, y) {
  ctx.save();
  ctx.shadowBlur = 10;
  ctx.shadowOffsetX = 7;
  ctx.shadowOffsetY = 7;
  ctx.shadowColor = shadow;
  
  ctx.fillStyle = color;
  
  ctx.beginPath();
  ctx.arc(x, y, 50, 0, 2*Math.PI);
  ctx.fill();
  ctx.restore();	
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    クリッピング<br/>
    <canvas id="canvassample" width="200" height="200"></canvas>
  </body>
</html>

↑

lesson18 dataURL †

[source] [reload]

HTML5 から <img src="data:image/png;base64,iVBORw0KGgoAAA..."/> のように、URL にバイナリデータを指定できるようになった。
canvas.toDataURL() は、canvas で描画されている内容を dataurl に変換する。
規格自体は 1998 年のものなのね http://tools.ietf.org/html/rfc2397

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson18</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
 
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  var ctx = canvas.getContext('2d');
  
  // canvas に図形を描画
  var grad = ctx.createLinearGradient(0,0,canvas.width,0);
  grad.addColorStop(0.0,'pink');
  grad.addColorStop(0.5,'yellow');
  grad.addColorStop(1.0,'cyan');
  
  ctx.fillStyle = grad;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  
  // canvas を dataURL にする
  var dataurl = canvas.toDataURL();
  document.getElementById('img').src = dataurl;
  document.getElementById('txt').innerHTML = dataurl;
  
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    <fieldset style="width:400px">
      <legend>Canvas</legend>
      <canvas id="canvassample" width="100" height="16"></canvas>
    </fieldset>
    <fieldset style="width:400px">
      <legend><img src="$dataURL"/></legend>
      <img id="img"/><br/>
    </fieldset>
    <fieldset style="width:400px">
      <legend>dataURL Text</legend>
      <textarea id="txt" rows="5" cols="50"></textarea>
    </fieldset>
  </body>
</html>

↑

lesson19 イベント †

[source] [reload]

マウスイベントから取得できる (x,y) は HTML 内の座標なので、canvas 内の座標を知るためには canvas の左上の座標を引く必要がある

var onMouseMove = function(e) {
  var rect = e.target.getBoundingClientRect();
  gMouseX = e.clientX - rect.left;
  gMouseY = e.clientY - rect.top;
};

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
    <!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <!-- IE 6,7,8 で Canvas を使う -->
    <title>Lesson19</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
// グローバル領域
gCtx = null;
gScreenWidth = null;
gScreenHeight = null;

gStar = null;

gMouseX = null;
gMouseY = null;

window.onload = function() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  
  gCtx = canvas.getContext('2d');
  gScreenWidth = canvas.width;
  gScreenHeight = canvas.height;
  gStar = new Star();
  
  // Canvas にマウスイベントを登録
  canvas.addEventListener("mousemove", onMouseMove, false);
  canvas.addEventListener("mouseout", onMouseOut, false);
  
  run();
}

function run() {
  gCtx.save();
  gCtx.fillStyle = 'black';
  gCtx.fillRect(0,0,gScreenWidth,gScreenHeight);
  gCtx.restore();
  
  gStar.update();
  setTimeout(run, 100);
}

var onMouseMove = function(e) {
  var rect = e.target.getBoundingClientRect();
  gMouseX = e.clientX - rect.left;
  gMouseY = e.clientY - rect.top;
};

var onMouseOut = function(e) {
  gMouseX = null;
  gMouseY = null;
};

function Star() {
  this.initialize.apply(this, arguments);
}

Star.prototype = {
  _x : 0,
  _y : 0,
  _diff : 0,
  initialize : function() {
    
  },
  update : function() {
    if (gMouseX && gMouseY) {
      this._x += (gMouseX - this._x) * 0.7;
      this._y += (gMouseY - this._y) * 0.7;
	}
    
    gCtx.save();
	gCtx.globalCompositeOperation = "lighter";
	gCtx.beginPath();
	gCtx.moveTo(this._x + 10 * Math.sin(0) , this._y + 10 * Math.cos(0));	
	var angle = 2 * Math.PI / 10;
	for (cnt = 1; cnt < 10; cnt++) {
	  if (cnt % 2 == 0) {
	    gCtx.lineTo(this._x + 10 * Math.sin(angle * cnt), this._y + 10 * Math.cos(angle * cnt));
	  } else {
	    gCtx.lineTo(this._x + 20 * Math.sin(angle * cnt), this._y + 20 * Math.cos(angle * cnt));		  
	  }
	}
	gCtx.closePath();
	
	gCtx.strokeStyle = 'yellow';
	gCtx.fillStyle = 'khaki';
	gCtx.fill();
	gCtx.stroke();
	
	gCtx.restore();
  }
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
    マウス追随<br/>
    <canvas id="canvassample" width="550" height="250"></canvas>
  </body>
</html>

↑

参考文献 †

HTML5 Canvas Cheat Sheet、2009、http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
HTML5.jp、http://www.html5.jp/canvas/index.html
explorercanvas、google、2009、http://code.google.com/p/explorercanvas/
IE9でなぜかCanvasがうまく動かない、すてねこのだんぼーる箱、2011、http://sute.nekok.com/index.php/2011/04/55/
HTML5 Canvas と JavaScript? を使って作る追尾サンプル 04 – マウスに追尾する処理を追加、phi、TM Life、http://tmlife.net/programming/javascript/html5-canvas-javascript-pursuit-04.html
HTML5　canvas上のイベントの位置を取得する、yanzu、YAMの雑記帳、http://y-anz-m.blogspot.jp/2010/09/html5canvas_1139.html

HTML

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

IE 6,7,8 で Canvas を使う †

lesson1 線を引く †

lesson2 閉曲線 †

lesson3 塗りつぶし・色 †

lesson4 矩形 †

lesson5 円弧、複数の色で塗り分け †

lesson6 透明色 †

lesson7 文字 (align, baseline, stroke, fill) + canvasの大きさ取得 †

lesson8 文字 (font, maxwidth, 表示幅の推定) †

lesson9 重ね合わせ †

lesson10 直線の端 †

lesson11 グラデーション、パターン †

lesson12 Image †

lesson13 ピクセル操作 †

lesson14 閉曲線の内側？外側？ †

lesson15 Transform †

lesson16 Shadow †

lesson17 クリッピング †

lesson18 dataURL †

lesson19 イベント †

参考文献 †