HTML5キャンバス - ボールの衝突
HTML5は、World Wide Webのコア言語であり、標準汎用マークアップ言語を応用したハイパーテキストマークアップ言語（HTML）の5回目の大幅な改訂版です。 1999年以降、HTML 4.01は大きく変化しました。今日では、HTML 4.01の一部の要素は廃止され、これらの要素はHTML5で削除または再定義されています。現代のインターネットアプリケーションをより良く扱うために、HTML5では多くの新しい要素と機能が追加されました。例えば、図形の描画、マルチメディアコンテンツ、より良いページ構造、より良いフォーム処理、そしてドラッグ＆ドロップ要素、ジオロケーション、ウェブアプリケーションキャッシュ、ストレージ、ウェブワーカーなどのいくつかのAPIが含まれます。 タグ 説明 タグは、グラフやその他の画像などのグラフィックを定義します。このタグはJavaScriptの描画APIに基づいています。 実行結果の表示： お使いのブラウザはHTML5をサポートしていません コード部分： お使いのブラウザはHTML5をサポートしていません // キャンバスオブジェクトを取得 var my_canvas = document.getElementById(“my-canvas”); // 描画コンテキスト（ブラシ）を取得 var my_huabi = my_canvas.getContext(“2d”); var x = 50; var y = 50; var r = 20; function deawBall(x,y){ // ブラシの色を設定 my_huabi.fillStyle = “green”; // 新しいパスを開始 my_huabi.beginPath(); // ボールを描画 my_huabi.arc(x, y, r, 0, 2 * Math.PI); // パスを閉じる my_huabi.fill(); } var fx_x = true;//fx_xがtrueの場合、x軸方向に移動 var fx_y = true;//fx_yがtrueの場合、y軸方向に移動 var speen = 1; // タイマー window.setInterval(“moveBall()”, 10); function moveBall(){ // 現在のボールの移動方向を判断 if(fx_x == true){ x += speen; if(x >= 500-r){ // 下端に達したら、上向きに跳ね返る fx_x = false; } }else{ x -= speen; if(x <= 0+r){ // 上端に達したら、下向きに跳ね返る fx_x = true; } } if(fx_y == true){ y += speen; if(y >= 400-r){ // 左端に達したら、右向きに跳ね返る fx_y = false; } }else{ y -= speen; if(y <= 0+r){ // 右端に達したら、左向きに跳ね返る fx_y = true; } } // キャンバスをクリアして再描画 my_huabi.clearRect(0, 0, 500, 400); deawBall(x, y); }