キャンバスを使う

キャンバスをつっかって絵を動かす

今回の目標は

こんなのです。弾む角度が変わるのはご愛嬌。

HTMLを準備しよう

canvasで図形を描く ←準備ファイル
いつもと違って、キャンバスタグがある。

 $<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を動かす</title>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas id="sample"></canvas>
</body>
</html>$

まず丸を書く

こんなスクリプト
ボディの中を書いておきます。
math.PI×2 って言うのが。360度のこと。
math.PI っていうのは 3.141592653589793 という数字、
よく見たことのある数字ですが何でしょう。
この2倍が円の一回りの角度です。
半径１ｃｍの円の演習を考えて説明すると・・・・省略（弧度法）

 $<body>
<canvas id="myCanvas" width="480" height="360"></canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");   
    ctx.beginPath();
        ctx.arc(240, 40, 20, 0, Math.PI*2, false);
        ctx.fillStyle = "green";
        ctx.fill();
    ctx.closePath();
</script>   
</body>$

ちょっと変える：関数

丸を各部分を、function draw() で関数にして、draw()で呼び出しています。

 $<canvas id="myCanvas2" width="400" height="60"></canvas>
<script>
    let canvas2 = document.getElementById("myCanvas2");
    let ctx2 = canvas2.getContext("2d");
    let x2 = canvas2.width/2;
    let y2 = canvas2.height-30;
    draw();

    function draw() {
        ctx2.beginPath();
        ctx2.arc(x2 , y2, 20, 0, Math.PI*2 );
        ctx2.fillStyle = "green"; 
        ctx2.fill();
        ctx2.closePath();
    }    
</script>$

動かすには

絵を各関数を一定時間で呼び出して、中心の位置を少しずらしてかきなおせばできそうです。

 $<canvas id="myCanvas3" width="400" height="200"></canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    let x = canvas.width/2;
    let y= canvas.height/2;
    let dx = 3;//この数値を変える
    let dy =-3;//この数値を変える
 function draw() {
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI*2);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
    x += dx;
    y += dy; 
     //ここへ何か書くと跳ね返るようになる
     if(x>=canvas.width){
         dx= -dx;
     }
    if(x<=0){
         dx= -dx);
     }
     if(y>=canvas.height){
         dy= -dy;
     }
    if(y<=0){
         dy= -dy;
     }
}
//10ミリ秒で再描画する    
setInterval(draw, 10);
</script>$

書いたら又消して書き直す

下のように動いた跡が消えなかったですね、
そんなときはこうします。
書いて消して書いて消して・・・と消す部分が必要なのです。

 $<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    let x = canvas.width/2;
    let y = canvas.height-30;
    let dx = 3;//この数値を変える
    let dy = -3;//この数値を変える
 function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
    x += dx;
    y += dy; 
     //ここへ何か書くと跳ね返るようになる
     if(x>=canvas.width){
         dx= -1* (Math.random()*5);
     }
    if(x<=0){
         dx= 1* (Math.random()*5);
     }
     if(y>=canvas.height){
         dy= -1* (Math.random()*5);
     }
    if(y<=0){
         dy= 1* (Math.random()*5);
     }
}
//10ミリ秒で再描画する    
setInterval(draw, 10);
        
</script>$

跳ね返る角度を変えたのがこれ。
ボールが枠の中に半分入ってしまうのもどうにかしよう、
どうしたら良いか考えよう。
このページのソースを見えれば、どうしているか分かる。
残像を残すのはｍ半透明で塗りつぶしているから。
このページの最初のソースを見れば分かる。 ←スクリプト参考サイト。
参考サイト ←この中の図形を描くところ(canvas)を見てみましょう。

課題

上の図形を自分の好きな形に書き換えて下さい。

鬱版上のボール移動のプログラム

これが一番上に動いているボールのプログラムそのままです。
canvas7 とか　ctx7 とか７月いているのは、他のボールが動いているプログラムの邪魔をしないため。

 $<canvas id="myCanvas7" width="400" height="200"></canvas>
<script>
    let canvas7 = document.getElementById("myCanvas7");
    let ctx7 = canvas7.getContext("2d");
    let x7 = canvas7.width/2;
    let y7 = canvas7.height/2;
    let dx7 = 3;  //この数値を変える
    let dy7 = -3; //この数値を変える
    let hankei=20;
 function draw7() {
//半透明に塗りつぶす指定　とりあえずこうすれば跡が残るだろうと屋手見たけど、他に色々方法があるようです
    ctx7.fillStyle = "rgba(" + [255, 255, 255, 0.2] + ")";
    ctx7.fillRect(0, 0, canvas7.width, canvas7.height);
    ctx7.beginPath();
    ctx7.arc(x7, y7, hankei, 0, Math.PI*2);
    ctx7.fillStyle = "green";
    ctx7.fill();
    ctx7.closePath();
    x7 += dx7;
    y7 += dy7;
     //ここへ何か書くと跳ね返るようになる
     if(x7+hankei>=canvas7.width){
         dx7= -1* (Math.random()*7+1);
     }
    if(x7-hankei<=0){
         dx7= 1* (Math.random()*7+1);
     }
     if(y7+hankei>=canvas7.height){
         dy7= -1* (Math.random()*7+1);
     }
    if(y7-hankei<=0){
         dy7= 1* (Math.random()*7+1);
     }
}
//10ミリ秒で再描画する    
setInterval(draw7, 10);
</script>$

sub1.html へのリンク　←５時間前の動画資料
次の問題へ進む

感想、エラー報告のお願い

ぜひ、ご協力お願い申し上げます。

絵を動かす(キャンバス）