تشترك الأمثلة الواردة في هذه المقالة في رمز يانصيب JS Turntable للرجوع إليه. المحتوى المحدد كما يلي
1. الآثار الأساسية التي تحققت
2. المحتوى الرئيسي
• استخدام علامات قماش في HTML5
• jqueryrotate.js الدوران البرنامج المساعد
3. رمز HTML الرئيسي
<Body> <viv> <viv> <canvas id = "wheelcanvas"> </tanvas> <img src = "images/wheel-pointer.png"/> </viv> </viv> <viv> <span id = "tip"> jason </span> </div> </html>
4. رمز CSS الرئيسي
.Content {Display: Block ؛ العرض: 95 ٪ ؛ الهامش: 30px Auto ؛}. المحتوى. WHEEL {Display: Block ؛ العرض: 100 ٪ ؛ الموقف: قريب صورة الخلفية: url (../images/wheel-bg.png) ؛ حجم الخلفية: 100 ٪ 100 ٪ ، العرض: 31.5 ٪ ؛ الارتفاع: 42.5 ٪ ؛ اليسار: 34.6 ٪ ؛ أعلى: 23 ٪ ؛}. نصائح {text-align: Center ؛ الهامش: 20px 0 ؛ الخط: عادي 24 بكسل 'Microsoft yahei' ؛}5. رمز JS الأساسي
/ * * عرض القرص الدوار * */الوظيفة drawwheelcanvas () {// الحصول على لوحة القماش الفنية ، أي ما يعادل الطبقة؟ ؟ var canvas = document.getElementById ("wheelcanvas") ؛ // var canvas = ($ ("#wheelcanvas")). get () [0] ؛ // لاحظ أن jQuery يحصل على كائن ملفوف ، وليس كائن DOM ، ويمكن تحويله // حساب الزاوية التي تشغلها كل كتلة ، نظام Radian var baseangle = math.pi * 2 / (turnwwardnames.length) ؛ // احصل على السياق var ctx = canvas.getContext ("2d") ؛ var canvasw = canvas.width ؛ // ارتفاع Artboard var canvash = canvas.hight ؛ // عرض Artboard // مسح مستطيل في المستطيل المعطى ctx.clearrect (0،0 ، canvasw ، canvash) ؛ // Strokestyle Draw the Color CTX.Strokestyle = "#ffbe04" ؛ // red // font font font font of text content on the canvas ctx.font = '16px microsoft yahei' ؛ // لاحظ أن موضع البداية يتم رسمه من زاوية 0 درجة. وهذا هو ، الاتجاه أفقيا إلى اليمين. // ارسم محتوى محدد لـ (var index = 0 ؛ index <turnwheel.RewardNames.length ؛ index ++) {// current angle var angle = turnwheel.startangle+index * baseangle ؛ // ملء ctx.fillstyle = turnwheel.colors [index] ؛ // ابدأ في رسم المحتوى // ----------------------------- CTX.BeginPath () ؛ /** draw arcs ، على غرار Quartz2d في iOS* context.arc (x ، y ، r ، sangle ، eangle ، عكس اتجاه عقارب الساعة) ؛ * x: النقطة المركزية للدائرة x * y: النقطة المركزية للدائرة x * sangle ، eAngle: start angle ، end angle * counterclockwise: draw ، اختياري ، خطأ = عقارب الساعة ، صحيح = counterclockwise * */ ctx.arc (canvasw * 0.5 ، canvash * 0.5 ، turnwheel.outsiderius ، angle + basle + basle ، false) ؛ ctx.arc (canvasw * 0.5 ، canvash * 0.5 ، turnwheel.insideradius ، angle + baseangle ، true) ؛ ctx.stroke () ؛ ctx.fill () ؛ // احفظ حالة القماش ، على غرار مكدس السياق الرسومي. يمكنك استعادة الحالة لاحقًا (تتم استعادة الإحداثيات إلى الحالية 0 ، 0) ، CTX.Save () ؛ /*---- ارسم محتوى الجائزة --------*/ // Red Font CTX.FillStyle = "#e5302f" ؛ var arwardname = 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) ؛ . // زاوية ، زاوية الدوران الحالية للمروحة نفسها + BASEANGLE / 2 يتم تدوير زاوية خط الوسط + الزاوية العمودية 90 ° ctx.rotate (الزاوية + BASEANGLE / 2 + MATH.PI / 2) ؛ /** الكود التالي يجعل تأثيرات مختلفة وفقًا لنوع الجائزة وطول اسم الجائزة ، مثل تأثيرات الخط واللون والصور. (على وجه التحديد تغيير وفقًا للوضع الفعلي) **/// طريقة MESURETEXT () لإرجاع قماش كائن يحتوي على عرض الخط المحدد بالبكسل. // FillText () طريقة ترسم النص المملوء على القماش. اللون الافتراضي للنص أسود. تقوم خاصية FillStyle بإعداد نص بلون/تدرج آخر/ * * * context.filltext (النص ، x ، y ، maxwidth) ؛ * ملحوظة! ! ! y هي القيمة السفلية للنص ، وليس القيمة العليا! ! ! * */if (arwardname.indexof ("m")> 0) {// Query ما إذا كانت حزم مرور الحقل تحتوي على var arwardnames = redwardname.split ("m") ؛ لـ (var j = 0 ؛ j <redwardnames.length ؛ j ++) {ctx.font = (j == 0)؟ 'Bold 20px Microsoft yahei': '16px microsoft yahei' ؛ if (j == 0) {ctx.filltext (redwardnames [j]+"m" ، -ctx.measureText (redwardnames [j]+"m"). width / 2 ، j * line_height) ؛ } else {ctx.filltext (rewardnames [j] ، -ctx.measureText (rewardnames [j]). width / 2 ، j * line_height) ؛ }}} آخر إذا (redwardname.indexof ("m") == -1 && rewwardname.length> 6) {// يتجاوز طول اسم الجائزة مجموعة معينة من rewardname = arwardname.substring (0،6)+"||"+redwardname.substring (6) ؛ var arwardnames = arwardname.split ("||") ؛ لـ (var j = 0 ؛ j <redwardnames.length ؛ j ++) {ctx.filltext (rewardnames [j] ، -ctx.measureText (reswardnames [j]). width / 2 ، j * line_height) ؛ }} آخر {// ارسم النص الملون على القماش. اللون الافتراضي للنص هو black ctx.filltext (rewardname ، -ctx.measureText (rewardname) .width / 2 ، 0) ؛ } // أضف الرمز المقابل if (arwardname.indexof ("qcoin")> 0) {// لاحظ أنه يجب عليك الانتظار حتى يتم إكمال تحميل IMG قبل أن تتمكن IMG من رسم imgqb.onload = function () {ctx.drawimage (imgqb ، -15،10) ؛ } ؛ CTX.DrawImage (IMGQB ، -15،10) ؛ } آخر إذا (rewardname.indexof ("شكرًا على المشاركة")> = 0) {imgsorry.onload = function () {ctx.drawimage (imgsorry ، -15،10) ؛ } ؛ ctx.drawimage (imgsorry ، -15،10) ؛ } // استعادة () قبل استعادة حالة Artboard إلى Save () Save () state ctx.restore () ؛ /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------في النهاية
هذا الشيء هو نفس تقنية Quartz2d في iOS ...
رمز مفصل >>>> انقر لتنزيل
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.