ヒント：このメッセージが表示されている場合、現在の記事は元のemlogブログシステムからここに移行されたものであり、記事の公開日時が非常に古いため、編成や内容が完全でない可能性があります。ご了承ください。
HTML5 キャンバス - 小球の衝突
日付：2017-7-18 阿珏 HTML ビュー：2465 回 コメント：2 件
html5はワールド ウェブ のコア言語、 標準汎用マークアップ言語 の下のアプリケーション ハイパーテキストマークアップ言語 （ HTML ）の第五回大規模な修正 。
1999年以降、HTML 4.01は多くの変更があり、今日、HTML 4.01のいくつかは廃止され、これらの要素はHTML5で削除または再定義されています。
今日のインターネットアプリケーションをより良く処理するために、HTML5は多くの新しい要素と機能を追加しました。例えば：グラフィックスの描画、マルチメディアコンテンツ、より良いページ構造、より良いフォーム処理、いくつかのAPIドラッグアンドドロップ要素、位置決め、ウェブアプリケーションキャッシュ、ストレージ、ネットワーカーなど。
|
タグ
|
説明
|
|---|---|
|
<canvas>
|
タグはグラフィックスを定義します。例えば、チャートや他の画像。このタグはJavaScriptの描画APIに基づいています。
|
効果の表示：
あなたのブラウザはH5をサポートしていません コード部分：
<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red" >あなたのブラウザはH5をサポートしていません</canvas>
<script type="text/javascript">
<!-- キャンバスオブジェクトを取得 -->
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);
}
</script>
ユーザーコメント：
bandwagonhost 3 年前 (2017-08-15)
友達、リンクを交換しませんか
阿珏 3 年前 (2017-08-16)
@bandwagonhost：リンク交換の申請ページから自主的に申請できますよ