ホームページ > 記事 > ウェブフロントエンド > 回転する風車の描画をキャンバスで実現
今回はCanvasを使って回転する風車を描く方法についてご紹介します。Canvasを使って回転する風車を描くときの注意点を紹介します。
教える前に、賢い人は Canvas の基本的な基本操作方法をマスターしていると思います。Canvas についてあまり知らない場合は、http://www.w3school.com.cn/tags にアクセスすることをお勧めします。 /html_ref_canvas .asp まずは慣れてみましょう
OK!下の写真は完成後の簡単なエフェクトです。アクションほどではないので簡単に描いてみましょう。
1. キャンバスを定義します
まず、キャンバスのサイズを 800 として定義するために HTML ファイルに挿入します。 ※600ピクセル。同時に、内部スタイル シートでキャンバスの背景色を設定します (描画時に表示するのに便利です)。次のコアは、JS を介してキャンバス要素オブジェクトを取得することです。DOM 操作
メソッドを実行し、 getContex("2d") を渡して 2D 描画コンテキストを取得します。このメソッドは、ブラウザに「このキャンバスに 2D グラフィックスを描画したい」と指示するのと同じです。風車風車の底面の幾何学模様 グラフィックは細長い台形のように見えますが、比較的良好な効果を得るために、色で塗りつぶすことができます。よし!コードを見てください~~!
rreeeページ上のエフェクトを見てみましょう。とても簡単ですか? (ちょっと話しすぎた気がします~!~!)
3. 葉を描きます
次の部分は、このアニメーションの最も重要な部分になります。 3 つの葉の間の角度は 120 度で、それぞれの葉の形は同じです。円の中心を最初に描くべきか、それとも最初に描くべきかという疑問が浮かぶかもしれません。葉が先ですか?葉っぱの形はどうやって描けばいいのでしょうか?葉っぱをコピーして貼り付けることはできますか?答えはもちろん「はい、やってみましょう!」です。
アイデア分析: 1) 3 枚の葉の形は全く同じなので、1 枚の葉を描くだけで済み、2 番目と 3 番目の葉を直接コピーするだけで済みます。賢い場合は、描画方法を指定する必要があります。このリーフの関数をカプセル化しますか?これを「bind( ) 関数」と呼ぶだけです。 !毎回電話するだけです!なぜ!皆さんとても賢いですね
2) 3 つの葉には円の中心があります。葉を描くときに座標値をわかりやすくするために、円の中心を図面の左上隅から に移動します。台形の上部にあるので、葉を描くのがはるかに便利になります。ここでは、座標系を移動するために、translate() メソッドが使用されています。
3) 最も難しい点は、アニメーションの原理が葉の描画のドキュメント構造に影響を与えるため、ここでアニメーションがどのように実装されているかを理解することです。
まず、新しい描画環境を作成します。これを環境と呼びます。 1、環境 1 で最初のリーフの描画を終了し、次に 120 度回転して最初の描画環境を前提として最初の描画環境 2 を作成し、次にリーフ描画関数 binding() を呼び出して 2 番目のリーフを描画します。葉の描画方法は先ほどと同じです。環境 2 を基準に 120 度回転し、新しい環境 3 を作成し、葉描画関数 binding() を呼び出して 3 番目の葉を描画します。アニメーションでは、最初の葉を回転させるだけで済みます。 描画環境 1、2 番目の葉、3 番目の葉はすべて環境 1 を参照して描画されています。これらも移動していますか? ?弾幕: 666666
4)、最後に基本的な外観スタイルのデバッグです。色のグラデーションや透明度など!
葉っぱの描き方 この葉っぱの形を描くときは、私の美意識がかなり低いのでご容赦ください。 もちろん、想像力豊かな生徒ならそれが可能です。それぞれの好みに合わせて描画しますが、一般的な考え方は同じです。ここでは、環境 1 の回転度を変更するためのパラメーターとして変数 var num = 0; を宣言します。 ! !
var num =0; function yezi(){ ctx.save(); //保存默认情况下的canvas变换状态 ctx.beginPath(); ctx.translate(400,300); // ctx.globalAlpha = 0.9; // 设置第一次状态下 坐标系旋转度数 ctx.rotate((Math.PI/180)*num); var liner1 = ctx.createLinearGradient(30,-12,30,12); //这里设置颜色渐变填充的样式 liner1.addColorStop(0,"#ccc"); liner1.addColorStop(0.5,"#fff"); liner1.addColorStop(1,"#ccc"); ctx.fillStyle = liner1; ctx.save(); //保存第一次状态 平移坐标系变换 ctx.beginPath(); bind(); //调用函数 //绘制第二片叶子 ctx.beginPath(); ctx.rotate((Math.PI/180)*120); //坐标系旋转120° ctx.save(); //保存旋转坐标系状态,为第三片叶子做铺垫 bind(); //调用函数 //绘制第三片叶子 ctx.beginPath(); ctx.rotate((Math.PI/180)*120); //坐标系旋转120° ctx.save(); bind(); //调用函数 ctx.restore(); //回复第3次状态前(旋转坐标系) ctx.restore(); //回复第2次状态前(旋转坐标系) //绘制叶子中心圆圈 ctx.beginPath(); var arcgradient = ctx.createRadialGradient(0,0,0,0,0,16); arcgradient.addColorStop(0,"#ccc"); arcgradient.addColorStop(0.1,"#fff"); arcgradient.addColorStop(1,"#ccc"); ctx.arc(0,0,10,0,Math.PI*2); ctx.fillStyle = arcgradient; ctx.fill(); ctx.restore(); //回复第1次状态前(平移坐标系) num+=5; //第一状下 环境1 态坐标系旋转度数增加********************************这个num使得环境1的旋转角度在不停的变化,********************************************** ctx.restore(); } //绘制每片叶子都重复的代码,这里做一个函数包装 function bind(){ ctx.moveTo(0,0); ctx.quadraticCurveTo(10,-12,30,-12); //比赛尔曲线 ctx.lineTo(190,-3); ctx.quadraticCurveTo(200,0,190,3); ctx.lineTo(30,12); ctx.moveTo(0,0); ctx.quadraticCurveTo(10,12,30,12); ctx.fill(); }
4、设置动画
动画这部分就比较简单了,设置定时器,清除画布,调用函数;大功告成,打完收工!!!
setInterval(function(){ ctx.clearRect(0,0,800,600); //每次执行代码前,都要将画布清空,不然画出的图形会滞留在画布上; buttom(); //调用函数 yezi(); },50);
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上が回転する風車の描画をキャンバスで実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。