こんにちは、私の親愛なる友人たち、私は自分のフロントエンドを軽spし、初めてブログを書いて、よく書かないでください。理解することを許してください。
教える前に、あなたは賢いと思います。ここにあります。
オーケー！以下の写真は、私たちの完成後の単純な効果です。
1.キャンバスを定義しますまず、HTMLファイルに<Canvas>タグを挿入して、キャンバスのサイズを定義します。同時に、キャンバスの背景色は内部スタイルのテーブルに設定されています（描画に便利なときに見るために）。
<！ canvas {background：＃5151a2;} </style> </head> <body> <canvas id = canvas width = 800 height = 600> </body> </html>次のコアは、JS DOM操作方法を介してCanvas Elementオブジェクトを取得し、この方法を介して2D描画コンテキストを取得しますキャンバス上の2Dグラフィックス。
<script type = text/javascript> //キャンバスを取得する2Dコンテキストを取得します。2。風車ベースを描きます
風車ベースの幾何学的なフィギュアは、細長い台形のように見えます。コードを直接見てください~~！
//パッケージングの下部ベースButtom（）{ctx.beginPath（）; （0、＃ccc）; =ライナー;出発点ctx.lineto（390,600）;ページの効果を見てみましょう、簡単ですか？
（私は少し多すぎると感じています〜！〜！）
3。葉を描きます次の部分は、このアニメーションで最も重要な場所ですまた、あなたの心の中にも、最初に葉を残しますか？葉の形をどのように描くべきですか？葉をコピーして貼り付けることはできますか？答えは確かに大丈夫です、やろう！
思考分析：
1）3つの葉の形状はまったく同じであるため、2番目の葉と3番目の葉を詰めるだけです。 bind（）関数と呼んでください！交差点それを呼ぶだけです！なぜ！あなたのTMはスマートすぎます
2）葉の葉が葉を持っています。翻訳（）メソッドは、ここではモバイル座標系です！
3）最も難しいポイントは、アニメーションの原則が絵画のドキュメント構造に影響するため、ここでアニメーションがどのように実現されるかを理解することです。葉の構造：
まず、新しい描画環境を作成し、環境で最初の葉を描きます1葉を上に呼び、2つの葉を描画します。 ;
アニメーションを達成したい場合は、第2葉と3番目の葉の描画環境1を回転させる必要があります。交差点 弾幕：6666666
4）最終的には、いくつかの基本的な外観スタイルがデバッグされます！勾配、透明性などなど！
葉を描きます私はこの葉の形を描いたとき、私の美学は非常に低いです。
ここでは、環境の回転数の変化のパラメーターとして、変数var num = 0;を宣言します。次に、コードを直接見てみましょう！交差点交差点
var num = 0; 、座標系ctx.rotate（math.pi/180）*num）の回転。 liner1.addcolorsstop（0.5、＃fff）;初めてのbind（）; 120°Ctx.save（）; 120） // 2番目の状態の前（回転座標系）// ctx.beginpath（）; ccc）;翻訳座標系）num+= 5;停的变化、****** ******************************** ******************************************** ******************************************** ******************************************** *************、各葉は繰り返されるコードです。これは、関数パッケージング機能Bind（）{ctx.moveto（0,0）です。 30、-12）; 12,30,12）; 4.アニメーションを設定しますアニメーションのこの部分は比較的簡単です。交差点交差点
setInterval（function（）{ctx.ClearRect）;}、50）;ソースコード：https：//github.com/224137748/blob/master/windmill.html
上記は、この記事のすべての内容です。