Contoh -contoh dalam artikel ini berbagi kode spesifik dari lotre turntable JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Efek dasar tercapai
2. Konten utama
• Penggunaan tag kanvas di html5
• JQueryRotate.js Plugin Rotasi
3. Kode HTML Utama
<body> <div> <div> <canvas id = "wheelcanvas"> </canvas> <img src = "gambar/wheel-pointer.png"/> </div> </div> <div> <span id = "Tip"> Jason </span> </Div> </body> </html>
4. Kode CSS utama
.content {display: block; Lebar: 95%; margin: 30px auto;}. Content .wheel {display: block; Lebar: 100%; Posisi: kerabat; latar belakang-gambar: url (../ gambar/wheel-bg.png); Ukuran latar belakang: 100%100%;}. Konten .Wheel canvas.item {width: 100%;}. Konten .wheel img.pointer {position: absolute; Lebar: 31,5%; Tinggi: 42,5%; Kiri: 34,6%; Top: 23%;}. Tips {Text-Align: Center; Margin: 20px 0; Font: Normal 24px 'Microsoft Yahei';}5. Kode JS Core
/ * * Rendering turntable * */function drawwheelcanvas () {// Dapatkan Canvas Artboard, setara dengan lapisan? ? var canvas = document.geteLementById ("wheelcanvas"); // var canvas = ($ ("#wheelcanvas")). get () [0]; // Perhatikan bahwa jQuery mendapatkan objek yang dibungkus, bukan objek DOM, dan dapat dikonversi // Hitung sudut yang ditempati oleh setiap blok, sistem radian var baseanggle = math.pi * 2 / (turnwheel.rewardnames.length); // Dapatkan konteks var ctx = canvas.getContext ("2d"); var canvasw = canvas.width; // tinggi artboard var canvash = canvas.height; // Lebar Artboard // Bersihkan persegi panjang dalam persegi panjang ctx.clearrect (0,0, canvasw, canvash); // strokestyle gambar warna ctx.strokestyle = "#ffbe04"; // Red // Atribut Font Font Font dari Konten Teks di Canvas Ctx.font = '16px Microsoft Yahei'; // Perhatikan bahwa posisi awal diambil dari sudut 0 °. Artinya, arah secara horizontal ke kanan. // Gambarkan konten spesifik untuk (indeks var = 0; index <turnwheel.rewardnames.length; index ++) {// sudut arus var sudut = turnwheel.startangle+index * baseanggle; // Isi warna ctx.fillstyle = turnwheel.colors [index]; // Mulai menggambar konten // ------------------------------- ctx.beginpath (); /** Gambar busur, mirip dengan quartz2d di ios* context.arc (x, y, r, sangle, eangle, counterclockwise); * x : The center point of the circle x * y : The center point of the circle x * sAngle,eAngle : Start angle, end angle* counterclockwise : Draw direction, optional, False = clockwise, true = counterclockwise* */ ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false); ctx.arc (canvasw * 0,5, canvash * 0,5, turnwheel.Insideradius, sudut + baseangle, true); ctx.stroke (); ctx.fill (); // Simpan keadaan kanvas, mirip dengan tumpukan konteks grafis. Anda dapat mengembalikan status nanti (koordinat dikembalikan ke 0, 0) saat ini, ctx.save (); /*---- Gambar konten hadiah --------*/ // Red font ctx.fillstyle = "#e5302f"; var rewardname = turnwheel.rewardnames [index]; var line_height = 17; // Terjemahan Metode Remap (0,0) Posisi pada kanvas // Context.translate (x, y); // Lihat gambar PPT, var translatex = canvasw * 0,5 + math.cos (sudut + baseanggle / 2) * turnwheel.textradius; var translatey = canvash * 0,5 + matematika. ctx.translate (translatex, translatey); // Metode putar memutar gambar saat ini karena teks cocok untuk garis tengah sektor saat ini tegak lurus! // sudut, sudut rotasi saat ini dari kipas itu sendiri + basa -basa / 2 sudut garis tengah diputar + sudut vertikal 90 ° ctx.rotate (sudut + basalle / 2 + math.pi / 2); /** Kode berikut ini memberikan efek yang berbeda sesuai dengan jenis hadiah dan panjang nama hadiah, seperti font, warna, dan efek gambar. (Khususnya berubah sesuai dengan situasi aktual) **/ // Metode Canvas MeasureText () Mengembalikan objek yang berisi lebar font yang ditentukan dalam piksel. // Metode FillText () Menggambar teks yang diisi pada kanvas. Warna teks default berwarna hitam. Properti Fillstyle membuat teks dengan warna/gradien lain/ * * Context.fillText (Teks, x, y, maxwidth); * Catatan! Lai Lai Y adalah nilai bawah teks, bukan nilai teratas! Lai Lai ? untuk (var j = 0; j <rewardnames.length; j ++) {ctx.font = (j == 0)? 'Bold 20px Microsoft Yahei': '16px Microsoft Yahei'; if (j == 0) {ctx.fillText (hadiahnames [j]+"m", -ctx.measureText (imbal imbalan [j]+"m"). width / 2, j * line_height); } else {ctx.fillText (imbalan imbalan [j], -ctx.measureText (imbal imbalan [j]). width / 2, j * line_height); }}} lain if (imbalanname.indexOf ("m") == -1 && imbalanname.length> 6) {// Panjang nama hadiah melebihi range rangeName tertentu = imbalanname.substring (0,6)+"||"+imbalane.substring (6); var rewardnames = rewardname.split ("||"); untuk (var j = 0; j <rewardnames.length; j ++) {ctx.filltext (hadiahnames [j], -ctx.measureText (imbal imbalan [j]). Lebar / 2, j * line_height); }} else {// Gambar teks berwarna pada kanvas. Warna default teks adalah CTX.FillText hitam (imbalan, -ctx.measureText (imbalan nama) .width / 2, 0); } // Tambahkan ikon yang sesuai if (imbalanname.indexof ("qCoin")> 0) {// Perhatikan bahwa Anda harus menunggu sampai pemuatan IMG selesai sebelum IMG dapat menggambar imgqb.onload = function () {ctx.drawimage (imgqb, -15.10); }; ctx.drawimage (imgqb, -15,10); } else if (rewardname.indexof ("Terima kasih telah berpartisipasi")> = 0) {imgsorry.onload = function () {ctx.drawimage (imgsorry, -15,10); }; ctx.drawimage (imgsorry, -15,10); } // restore () sebelum memulihkan keadaan artboard ke status save () sebelumnya ctx.restore (); /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------akhirnya
Hal ini hampir sama dengan teknologi Quartz2D di iOS ...
Kode terperinci >>>> Klik untuk mengunduh
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.