前回の
HTML5の Canvasを使ってみたにて単純な三角形を作ってみました。
ただの三角形だとつまらないので、この三角形を動くようにしてみました！
三角形を動かす仕組みは、setIntervalを使って数秒おきに図形を描いています。
ただーし、図形を描くだけならすぐに出来るのですが、図形を消す方法がわからなかった。
ので、調べました！
context.clearRect(x,y,w,h)を使います！
消す方法はこれしか無いようです。
この関数の引数に消す範囲を渡します。そうすると、その範囲内の図形が消されます。
・ただ、三角形がウニョウニョ動くだけのソースです
<!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>
・ブラウザが対応していれば、下記リンクから見れます
サンプル
微妙な動きが良いですね
返信削除