2012/03/28

HTML5 Canvasを試す

HTML5の目玉のひとつCanvas

JavaScriptで絵が描けるというということなので、ちょっと試しに作ってみた。静止画では面白くないので、HTML5のスライダーを使って変化させられるようにした。赤ラインがサイン波で、緑ラインがコサイン波。青ラインがその合成となる。スライダーで赤と緑の周期をコントロール。今までJavaAppletでやっていたようなことが、Canvasで実現できるのね。これはいいかも。反応が思ったよりもよくてびっくり。動きも滑らか&アンチエイリアスもはじめからかかっていて、使えるという印象だ。
作ってから分かったのだけど、input type="range"タグってIE9でも見れないのね。IE8だとたぶん何も見れてないと思う。この手のhtml5は、まだ実験段階だわ。現時点ではJavaAppletを使った方がよさそうだ。




JavaScript部分のソースコード

<script type="text/javascript">
<!--
function setControl() {
   obj = document.getElementsByClassName('change');      
   for (var i = 0;i < obj.length; i++) {
      obj[i].addEventListener
      ('input', function(){drawWave()}, false);
      }
        drawWave();
      }
function drawWave() {
    var canvas = document.getElementById("wave");
    if(canvas.getContext) { 
        var context = canvas.getContext("2d");
  var r = document.frmControl.red.value;
  var g = document.frmControl.green.value;

 context.clearRect(0,0,461,201);

  context.strokeStyle = 'rgb(255,0,0)';
        context.beginPath();
        context.moveTo(0, 101);
 for(var i=1; i<461; i++){
 context.lineTo(i,101+Math.sin(i/r)*-40);
 }
        context.stroke();

  context.strokeStyle = 'rgb(0,255,0)';
 context.beginPath();
        context.moveTo(0, 101);
 for(var i=1; i<461; i++){
 context.lineTo(i,101+Math.cos(i/g)*-40);
 }
        context.stroke();

  context.strokeStyle = 'rgb(0,0,255)';
 context.beginPath();
        context.moveTo(0, 101);
 for(var i=1; i<461; i++){
 context.lineTo(i,(Math.sin(i/r)*-40)+(Math.cos(i/g)*-40)+101);
 }
        context.stroke();

 context.strokeStyle = 'rgb(0,100,0)';
 context.beginPath();
 context.moveTo(0, 101);
 context.lineTo(461, 101);
 context.stroke();
   }
}
window.onload = setControl;
//-->
</script>

HTML部分のソースコード

<canvas height="201" id="wave"
style="background-color: black;" width="461"></canvas>
<br />
<form name="frmControl">
<label for="red">R </label>
<input class="change" max="100" min="10" 
name="red" type="range" value="20" />
<br />
<label for="green">G </label>
<input class="change" max="100" min="10" 
name="green" type="range" value="20" />
</form>