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>
|