この記事の例は、参照のためにJSターンテーブル宝くじの特定のコードを共有しています。特定のコンテンツは次のとおりです
1。達成された基本効果
2。メインコンテンツ
•HTML5のキャンバスタグの使用
•jqueryrotate.js回転プラグイン
3.メインHTMLコード
<body> <div> <div> <canvas id = "wheelcanvas"> </canvas> <img src = "images/wheel-pointer.png"/> </div> </div> <div> <span id = "tip"> jason </span> </div> </body> </html> </html> </html> <
4.メインCSSコード
.content {display：block;幅：95％;マージン：30px auto;}。content .wheel {display：block;幅：100％;位置：相対;背景イメージ：url（../ images/wheel-bg.png）;バックグラウンドサイズ：100％100％;}。コンテンツ。ホイールcanvas.item {width：100％;}。幅：31.5％;高さ：42.5％;左：34.6％; TOP：23％;}。TIPS {TEXT-ALIGN：CENTER;マージン：20px 0;フォント：通常の24px 'Microsoft yahei';}5。コアJSコード
/ * *ターンテーブルのレンダリング * */function drawwheelcanvas（）{//レイヤーに相当するキャンバスアートボードを取得しますか？ ？ var canvas = document.getElementById（ "wheelcanvas"）; // var canvas =（$（ "＃wheelcanvas"））。get（）[0]; // jQueryは、DOMオブジェクトではなくラップされたオブジェクトを取得し、変換できることに注意してください//各ブロックで占める角度を計算することができます。RadianSystemvar baseangle = math.pi * 2 /（turnwheel.rewardnames.length）; //コンテキストを取得var ctx = canvas.getContext（ "2d"）; var canvasw = canvas.width; //アートボードの高さvar canvash = canvas.height; //アートボードの幅//指定された長方形ctx.clearrect（0,0、canvasw、canvash）の長方形をクリアします。 // strokestyle draw col ctx.strokestyle = "＃ffbe04"; // red // font current font属性キャンバスCTX.font = '16px microsoft yahei'のテキストコンテンツの属性 '; //開始位置は0°角から描画されることに注意してください。つまり、右側の水平方向です。 //（var index = 0; index <turnwheel.rewardnames.length; index ++）の特定のコンテンツを描画する{// current angle var angle = turnwheel.startangle+index * baseangle; // fill color ctx.fillstyle = turnwheel.colors [index]; //コンテンツの描画開始/** iOSのquartz2dと同様のアークを描画* context.arc（x、y、r、sangle、eangle、countercockwise）; * x：円の中心点x * y：円の中心点x *サングル、eangle：角度、端角 *反時計回り：方向、オプション、false、false * * */ ctx.arc（canvash * 0.5、turnwheel.outsidederadius、角度、角度 + baseangle、false）; ctx.arc（canvasw * 0.5、canvash * 0.5、turnwheel.insideradius、angle + baseangle、true）; ctx.stroke（）; ctx.fill（）; //グラフィックコンテキストスタックと同様に、キャンバスの状態を保存します。状態を後で復元できます（座標は現在の0、0、0に復元されます）、ctx.save（）; /*----賞品コンテンツを描く--------*/ // RED FONT CTX.FILLSTYLE = "＃e5302f"; var rewardname = turnwheel.RewardNames [index]; var line_height = 17; //メソッドの翻訳remap（0,0）キャンバス上の位置// context.translate（x、y）; // ppt picture、var translatex = canvasw * 0.5 + math.cos（angle + baseangle / 2） * turnwheel.textradius; var translatey = canvash * 0.5 + math.sin（angle + baseangle / 2） * turnwheel.textradius; ctx.translate（translatex、translatey）; //テキストは現在のセクターの中心線に適しているため、回転法は現在の図面を回転させます！ //角度、ファン自体の電流回転角 +ベースアングル / 2中心線の角度は回転 +垂直角90°CTX.rotate（角度 + baseangle / 2 + math.pi / 2）; /**次のコードは、フォント、色、画像効果など、賞の種類と賞品名の長さに応じて異なる効果をレンダリングします。 （具体的には実際の状況に応じて変更） // filltext（）メソッドは、キャンバスに塗りつぶされたテキストを描画します。テキストのデフォルトの色は黒です。 fillstyleプロパティは、別の色/勾配/ * * context.filltext（text、x、y、maxwidth）でテキストをレンダリングします。 * 注記！ ！ ！ yはテキストの下位値であり、最高値ではありません！ ！ ！ * */if（rewardname.indexof（ "m"）> 0）{//フィールドトラフィックパケットが含まれているかどうかquery var rewardnames = rewardname.split（ "m"）; for（var j = 0; j <rewardnames.length; j ++）{ctx.font =（j == 0）？ 'bold 20px microsoft yahei'： '16px microsoft yahei'; if（j == 0）{ctx.filltext（rewardnames [j]+"m"、-ctx.measureText（rewardnames [j]+"m"）。width / 2、j * line_height）; } else {ctx.filltext（rewardnames [j]、-ctx.measureText（rewardnames [j]）。width / 2、j * line_height）; }}} else if（rewardname.indexof（ "m"）== -1 && rewardname.length> 6）{//賞品名の長さは特定の範囲を超えています。 var rewardnames = rewardname.split（ "||"）; for（var j = 0; j <rewardnames.length; j ++）{ctx.filltext（rewardnames [j]、-ctx.measureText（rewardnames [j]）。width / 2、j * line_height）; }} else {//キャンバスに色付きのテキストを描きます。テキストのデフォルト色はブラックctx.filltext（rewardname、-ctx.measureText（rewardname）.width / 2、0）です。 } //対応するアイコンを追加するif（rewardname.indexof（ "qcoin"）> 0）{// imgがimgqb.onload = function（）{ctx.drawimage（imgqb、-15,10）を描画する前にimgロードが完了するまで待つ必要があることに注意してください。 }; ctx.drawimage（imgqb、-15,10）; } else if（rewardname.indexof（ "参加してくれてありがとう"）> = 0）{imgsorry.onload = function（）{ctx.drawimage（imgsorry、-15,10）; }; ctx.drawimage（imgsorry、-15,10）; } // restore（）前のsave（）state ctx.restore（）にアートボードを復元する前に; /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------やっと
このことは、iOSのQuartz2Dテクノロジーとほとんど同じです...
詳細なコード>>>>クリックしてダウンロードします
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。