HTML5 Canvas を使用してキーボードとマウスのアニメーションを作成する例を共有する

HTML5 Canvas を使用してキーボードとマウスのアニメーションを作成する例を共有する_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:45:44

オリジナル

2334 人が閲覧しました

キーボードでボールの動きを制御します

ご存知のとおり、私たちが見ているアニメーションは、実際には静止画像の素早い切り替えの連続であり、視覚的な残像により肉眼では「動画」のような視覚効果を与えます。これを理解すると、キャンバス上にアニメーション効果を描画することが比較的簡単になります。最初に特定の静的グラフィックをクリアし、それを別の場所に再描画することを繰り返して、静的グラフィックを特定の軌道に従って移動させ、アニメーション効果を生成するだけです。

次に、キャンバス上に固体のボールを描画し、キーボードの矢印キーを使用してボールの動きを制御し、ダイナミックな効果を生み出します。サンプルコードは次のとおりです:

JavaScript コードコンテンツをクリップボードにコピーします

"UTF-8">
html5キャンバス描画可動ボール入力例
"moveBall(event)">
<キャンバス ID="myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
<スクリプトタイプ="text/javascript">
//Canvas オブジェクト (canvas) を取得します
var Canvas = document.getElementById("myCanvas");
//球のクラスを表します
関数 Ball(x, y ,radius,speed){
this.x = x || 10; //球の x 座標、デフォルトは 10
this.y = y || 10; //球の y 座標、デフォルトは 10
this.radius = radius || //球の半径、デフォルトは 10
this.speed = 速度 || // ボールの移動速度、デフォルトは 5
//上に移動
this.moveUp = 関数(){
this.y -= this.speed
if(this.y < .radius){ //上限を超えないようにします
RM
//右に移動
this
function
this
this.speed var
this.radius; if(
.x > maxX){ //正しい境界を超えないようにします
この.x = maxX; }
};
//左に移動
this.moveLeft = function(){
this.x -= this.speed
if(this.x < .radius){
.x = this.radius;
//下に移動
this
function(){ this
this.speed var
this.radius; if(
.y > maxY){ //下限を超えないようにします
これ.y = maxY;
}; }
drawBall(ball){
(typeof ctx !=
){ ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false); >
}
//キャンバスをクリア
関数 clearCanvas(){
if(typeof ctx != "未定義"){
ctx.clearRect(0, 0, 400, 300);
}
}
var ball = new Ball();
//HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
if(canvas.getContext){
//対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
var ctx = Canvas.getContext("2d"); ドローボール (ボール)
}
//onkeydown イベントのコールバックハンドラー関数
//ユーザーのキーに従ってボールの動きを制御します
関数 moveBall(event){
スイッチ(event.keyCode){
case 37: //左矢印キー
ball.moveLeft();
ブレイク;
case 38: //上方向キー
ブレイク;
39: //右矢印キー ball.moveRight();
; case
//下矢印キー ball.moveDown();
ブレイク
default:
戻る;
//まずキャンバスをクリアします
//最新のボールを描画します
HTML5 をサポートするブラウザを使用して次の Web ページを開いて実際の効果を確認してください (矢印キーを使用して移動します):
。

ピエロのスマイリーフェイス

いくつかの API を理解するだけで、必要なアニメーションパラメーターを使用して、動きに反応するこの興味深い Web アニメーションを作成できます。

最初のステップは顔の特徴を描くことです
このピエロには耳と眉がないので、器官は 3 つだけ残っていますが、2 つの目は別々に描く必要があるので、合計 4 つのパーツがあります。まずはコードを見てみましょう。

左目を描画するコード

JavaScript コード

コンテンツをクリップボードにコピーします

var leftEye = new Kinetic.Line({
x: 150、
ポイント: [0, 200, 50, 190, 100, 200, 50, 210]、
テンション: 0.5、
クローズ済み: true、
ストローク: '白'、
ストローク幅: 10
});

右目を描画するコード

JavaScript コードコンテンツをクリップボードにコピーします

var rightEye = new Kinetic.Line({
x: sw - 250、
ポイント: [0, 200, 50, 190, 100, 200, 50, 210]、
テンション: 0.5、
クローズ済み: true、
ストローク: '白'、
ストローク幅: 10
});

鼻を描くためのコード

JavaScript コードコンテンツをクリップボードにコピーします

var names = new Kinetic.Line({
ポイント: [240, 280, sw/2, 300, sw-240,280]、
テンション: 0.5、
クローズ済み: true、
ストローク: '白'、
ストローク幅: 10
});

口を描くためのコード

JavaScript コードコンテンツをクリップボードにコピーします

varmouth = new Kinetic.Line({
ポイント: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh]、
テンション: 0.5、
クローズ済み: true、
ストローク: 「赤」、
ストローク幅: 10
});

それがほんの数行のコードであることがわかったら、がっかりするでしょうか?はい、とても簡単です。あなたは Web ゲームアニメーションプログラマーになれるという自信を持ち始めていると思います。

上記のコードを簡単に説明します。 Kinetic は私たちが使用する JS ツールキットです。ページの先頭で、次のように参照する必要があります:

JavaScript コードコンテンツをクリップボードにコピーします

varmouth = new Kinetic.Line({
ポイント: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh]、
テンション: 0.5、
クローズ済み: true、
ストローク: 「赤」、
ストローク幅: 10
});

その他は、線の弾力性、色、幅など、いくつかの重要なポイントです。これらは理解しやすいです。

2 番目のステップは、画像を動かすことです

このアニメーションが魅力的な理由は、マウスの動きに反応し、ユーザーと対話できることです。これは、アニメーションを成功させるために最も重要な側面です。よく観察すると、ピエロの顔の変化は目が大きくなり、口が大きくなり、鼻が大きくなるだけです。しかし、特別なのは、この変化が瞬間的な変化ではないということです。そこにはいくつかのアルゴリズムが含まれています。これが最も懸念される部分です。幸いなことに、これらのアルゴリズムテクノロジは非常に成熟しており、アニメーションエンジンライブラリはこれらのテクノロジを非常にシンプルで便利なインターフェイスにカプセル化しています。物事を動かす方法を見てみましょう。

左目のアニメーション

JavaScript コードコンテンツをクリップボードにコピーします