コイケアキヨシ blog: HTML5の Canvasで動くものを作ってみた

前回のHTML5の Canvasを使ってみたにて単純な三角形を作ってみました。

ただの三角形だとつまらないので、この三角形を動くようにしてみました！

三角形を動かす仕組みは、setIntervalを使って数秒おきに図形を描いています。

ただーし、図形を描くだけならすぐに出来るのですが、図形を消す方法がわからなかった。
ので、調べました！

context.clearRect(x,y,w,h)を使います！
消す方法はこれしか無いようです。
この関数の引数に消す範囲を渡します。そうすると、その範囲内の図形が消されます。

・ただ、三角形がウニョウニョ動くだけのソースです

view plain print ?

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var plus = true;
var count = 0;
var hoge = function() {
var pos = 120;
if(count > 70 || count < -70) {
plus = plus === false;
}
if(plus) {
count++;
} else {
count--;
}
pos = pos + count;
context.clearRect(0, 0, 200, 200);
context.beginPath();
context.moveTo(120, 100);
context.lineTo(pos , 50);
context.lineTo(pos, 150);
context.closePath();
context.stroke();
}
setInterval(hoge, 10);
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var plus = true;
var count = 0;
var hoge = function() {
 var pos = 120;
 if(count > 70 || count < -70) {
  plus = plus === false;
 }
 if(plus) {
  count++;
 } else {
  count--;
 }
 pos = pos + count;
 context.clearRect(0, 0, 200, 200);
 context.beginPath();
 context.moveTo(120, 100);
 context.lineTo(pos , 50);
 context.lineTo(pos, 150);
 context.closePath();
 context.stroke();
}
setInterval(hoge, 10);
</script>
</body>
</html>

・ブラウザが対応していれば、下記リンクから見れます
サンプル

コイケアキヨシ blog

2010年5月9日日曜日

HTML5の Canvasで動くものを作ってみた

1 件のコメント: