[30分]完了キャンバスアニメ|ゲームの基礎（2）：スクラッチ絵画

序文

最初の部分は、ここでの主な理論の概要を説明し、これは、より多くのこれらの慣行の、基本的な使い方Laijiangjiangキャンバスなるとアプリケーションのいくつかの基本的な三角関数、読むために友人に基づいていないキャンバス勧告、身近な友人はスキップすることができます含まれています。
彼らは、批判を牛を議論する歓迎の人々に限られた能力を持っています。

それを一緒に描きます

キャンバスのAPIの多くがありますが、あなたがそれ（笑）のアカウントを実行しているとして、文書のかもしれないが、このチュートリアルの考えは最初から基本的な使用法を説明するためのステップバイステップのサンプルがどのように絶対に無限大です、そしてあなた自身のために見たら30分を列挙。
関連資料キャンバス

準備

キャンバス配列：追加することにより、<canvas>タグを、キャンバス要素を追加します。
キャンバスを取得します：により、<canvas>IDタグ、キャンバスのオブジェクトを取得します。
2D環境を得るために、キャンバスオブジェクトのメソッドを介してのgetContext（「2D」）：ブラシを得ます。

<canvas id="canvas" width="400" height="400"></canvas>

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

矢印を描きます

まず、描画底黄色の矢印の赤のエッジを次のように、オブジェクト指向のコードの組織を使用して、すべてのコードを。
クラスは、アローという名前。これは、xがyは座標軸、座標た、カラー色の終わり、4つの属性の回転の回転アーク。
パラメータとしてコンテキストオブジェクトを必要と方法の例（描画）、それは文脈で動作するように準備ができて、それは絵筆に相当し、キャンバスブラシインスタンス（）メソッドを描画するために、実際には依存性注入プロセスと同様あり、矢印参照してくださいコードのコメントを塗装する工程を描画するために、このブラシの使用例。以下の点に特に注意してください：

beginPathのmoveTo後（）メソッドの呼び出し（）とのlineTo座標を移動させるにbeginPath座標ときブラシに対して）（ブラシ座標系に入ることを理解され、それはキャンバスに回転及び移動させることができる作業座標がプロットされていますこの座標系に属します。
（）にbeginPathを呼び出してコード方法ストローク（）、フィル（）またはclosePath（）を描画範囲の端部に設けられた後、それは状態を描画し、描画セット状態の開始点です。
;効果は、ペンの唯一のキャンバスは、その後の絵は最初の未完成、保存して（）の減少を復元する必要があります汚染しないようにするために、異なる被験者でのお届けとなりますので、状態のペンを保持するためである）（セーブ
<canvas>自体透明であり、あなたはそれを一般的に白の背景を使用する背景の例を与えるためにCSSを使用することができます。

/**
 * 箭头类
 * @class Representing a arrow.
 */
/* eslint no-unused-vars: ["error", { "varsIgnorePattern": "Arrow" }] */
class Arrow {
  /**
    * Create a arrow.
    */
  constructor() {
    this.x = 0;
    this.y = 0;
    this.color = '#ffff00';
    this.rotation = 0;
  }
  /**
   * Draw the arrow.
   * @param {Object} _context - The canvas context.
   */
  draw(_context) {
    const context = _context;
    // 会先保存画笔状态
    context.save();
    // 移动画笔
    context.translate(this.x, this.y);
    // 旋转画笔
    context.rotate(this.rotation);
    // 设置线条宽度
    context.lineWidth = 2;
    // 设置线条颜色
    context.strokeStyle = '#ff0000';
    // 设置填充颜色
    context.fillStyle = this.color;
    // 开始路径
    context.beginPath();
    // 将笔移动到相对位置
    context.moveTo(-50, -25);
    // 画线到相对位置
    context.lineTo(0, -25);
    context.lineTo(0, -50);
    context.lineTo(50, 0);
    context.lineTo(0, 50);
    context.lineTo(0, 25);
    context.lineTo(-50, 25);
    context.lineTo(-50, -25);
    // 闭合路径
    context.closePath();
    // 填充路径包围区
    context.fill();
    // 绘制路径
    context.stroke();
    // 载入保存的笔信息
    context.restore();
  }
}

同様に、我々はまた、ラウンドとして、他の何かを描くことができball.js、もう少し、これらのパラメータの、ゆっくりと理解。
この効果は、完成した（若干のネタバレを）見ることができます：マウスの矢印トラックの位置を

上に移動循環に参加

今、私たちは絵の基本的なスキルを習得している、とあなたは矢印を描くことができarrow.jsとラウンドball.jsを、それだけで静止画は、その後、我々は常に消去とフレームアニメーションを達成するための作業の再描画、ループを必要とします。
関数を描画するにはあなたは、ほとんどの場合に表示されます、すぐに実行されるコードの一部以下drawFrame、そして自分自身を再帰的に呼び出します。
すでに説明したサイクルの原理で繰り返されることはありません。本明細書にclearRect（）この関数は、矩形領域内の塗装除去するために、矩形座標、すなわち（x座標軸、y軸座標、矩形幅と矩形の高さ）をとることに留意されたいです。
、柔軟に必要例は、直接クリアにキャンバス全体であるが、これは絶対的ではない、ブラシが更新されない、または全てをリフレッシュするパーシャルリフレッシュ。
さわやかな例がありません：マウスの描画ツール

(function drawFrame() {
  // 类似setTimeout的操作
  window.requestAnimationFrame(drawFrame, canvas);
  // 将画布擦干净
  context.clearRect(0, 0, canvas.width, canvas.height);
  // ...继续你的作画
}());

それにいくつかの力を与えます

今、絵は常に再描画されているが、なぜそれはまだありますか？何がすべてのリフレッシュを描画する内容を変更していないので。
それは私たちが、それを与えた、それが移動できるように、例えば、常にマウスを指す矢印ましょうという目標です。
以下は、コアコードであり、主な目的は、矢印の各フレームの回転角を得ることで、ツールは、に応じて、本明細書にリアルタイムX、Y軸座標、パッケージの原理は、既に述べた、このマウス座標と矢印でマウスマウスリターンを使用しました下に示すように、座標、マウスは、矢印の距離dx及びDyのに対して得ることができます。

アロー角デモ

即ち、矢印の逆正接関数の回転角がDX及びDYを使用することによって得ることができる場合の注意点：

原点中心位置に見出される、回転の角度は、ブラシのちょうど回転角である上記のコードにおいて、描画処理の矢印注意深く見ます。
矢印の中心座標を移動させる数値は病気ではないので、DX及びDYは、矢印にマウスの相対座標です。
（ - 2）を黄褐色の値がすでに1/2として、複製、および1 /することができるので、代わりATANの、使用ATAN2 2 -0.5、区別できない象限、及びATAN2を区別することができるされています。

完全な例は：マウスの矢印の位置を追跡します

window.onload = function () {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const mouse = utils.captureMouse(canvas);
  const arrow = new Arrow();

  arrow.x = canvas.width / 2;
  arrow.y = canvas.height / 2;

  (function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    const dx = mouse.x - arrow.x;
    const dy = mouse.y - arrow.y;

    arrow.rotation = Math.atan2(dy, dx);
    arrow.draw(context);
  }());
};

三角関数

ダウンの動き

最終的に三角関数（笑）のトピックへのスムーズな移行。アークタンジェント三角関数は、複数のアプリケーション、次の例を見ています。
以下では、アップおよびコアコードの上下動ボールである、それは、フレーズであり、y軸座標変化ボールに焦点を当てています。

ball.y = clientY + Math.sin(angle) * range;

Math.sinは、（角度）を使用して角度が増加するにつれて、1 -1の範囲にあるので、上下のボール移動範囲ことが、繰り返されます。
完全な例：ボールの上下運動（調整可能バージョン）

window.onload = function () {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const ball = new Ball();
  let angle = 0;
  // 运动中心
  const clientY = 200;
  // 范围
  const range = 50;
  // 速度
  const speed = 0.05;

  ball.x = canvas.width / 2;
  ball.y = canvas.height / 2;

  (function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);

    ball.y = clientY + Math.sin(angle) * range;
    angle += speed;
    ball.draw(context);
  }());
};

前方への移動

ただ、前方ラウンドを手放す、すぐに上下に動く、実際には、各フレームのx軸の位置を変更することです。
次のようにコアコードは、垂直運動、マルチスピードx軸の前面に比べて、であり、各フレームは移動ほとんど進行波効果形成されています。
完全な例：ボールの波動

window.onload = function () {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const ball = new Ball();
  let angle = 0;
  const centerY = 200;
  const range = 50;
  const xspeed = 1;
  const yspeed = 0.05;

  ball.x = 0;
  (function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    ball.x += xspeed;
    ball.y = centerY + Math.sin(angle) * range;
    angle += yspeed;
    ball.draw(context);
  }());
};

その他の例

他のアプリケーションは、それらのいくつかの外に設定一つずつ、説明することはできません。

序文