キャンバス描画やカウントダウン効果が魅力的なアニメーション ビデオの推奨リソース

Canvas は、その名前が示すように、ブラウザ上で定義されたキャンバスですが、Canvas は単なる要素ではなく、プログラミング インターフェイスのセットであり、その出現は Web の本来のドキュメントベースの設計意図を超えています。これを使用して夢のようなコンテンツを数多く開発できるため、プログラマーは創造性を完全に発揮できます。

コース再生アドレス: //m.sbmmt.com/course/303.html

先生の教え方:

先生の講義はシンプルかつ奥深く、構造が明確です、相互に接続された厳密な議論、厳密な構造を層ごとに分析し、論理的思考力を使用して生徒の注意を引き、理性を使用して教室での指導プロセスを制御します。教師の講義を聞くことで、生徒は知識を学ぶだけでなく、思考トレーニングを受け、教師の厳格な学問的態度に影響され、影響を受けます

このビデオでより難しい部分は、カウントダウン効果ですキャンバスの描画とアニメーション:

HTML:

<canvas id="canvas" style="border:1px solid red;"></canvas>

JS:

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

// 注意，是不加单位的，而且不建议在css中设置宽高。最好是调用width和height这两个属性
canvas.width = 1024;
canvas.height = 768;

練習: 直線を描画します (非常に注意してください。描画するために stop() メソッドを呼び出す前に、最初に状態を設定する必要があります。順序が逆になると、結果は生成されず、エラーは報告されず、デバッガーは問題を修正できません)

// 先设置状态
    context.moveTo(100, 100);
    context.lineTo(700, 700);
    context.lineTo(700, 100);
    context.lineTo(100, 100);
    context.lineWidth = 10;
    context.strokeStyle = "pink";
// 再进项绘制
    context.stroke();

パスを定義します:

context.moveTo(100, 100);  //接受两个参数，表示x坐标和y坐标
context.lineTo(700, 700);

複数のパスを定義します: 定義する状態を次のメソッドでラップします。次に、ストローク() メソッドを呼び出して、さまざまな状態を描画します。

context.beginPath();
context.closePath();

の線。 タングラムの描画: 写真 1 は先生が描き、写真 2 は私が描きました。 。はははは、大変ですね。次のレッスンでは、キャンバス システムを学習した後、円と円弧を描く方法を学びます。JS のコリジョン テクノロジーを使用して、ジグソーパズルを動かし、別のグラフィックスにつなぎ合わせてみます。

以上がキャンバス描画やカウントダウン効果が魅力的なアニメーション ビデオの推奨リソースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。