canvas实现转盘抽奖、刮刮乐

xiaoxiao2021-02-28  21

canvas实现转盘抽奖:

        var arr = [{id:1,text:'10元话费',img_url:'images/a.png'},{                     id:2,text:'20元话费',img_url:'images/2.png'},{                     id:3,text:'30比特币',img_url:'images/3.png'},{                     id:4,text:'40比特币',img_url:'images/4.png'},{                     id:5,text:'50比特币',img_url:'images/5.png'},{                     id:6, text:'60比特币',img_url:'images/6.png'},{                     id:7,text:'70比特币', img_url:'images/7.png'},{                     id:8,text:'80比特币',img_url:'images/7.png'}]         var $deg = 0;         var earlyIndex = 0;       //上次随机选择的数字         var currIndex = 0;        //当前随机选择的数字         var isAnimate = false;    //当前是否还在旋转         var rotateAngel = 360/arr.length;      //旋转的角度         document.getElementById("start").onclick = function(){           if(!isAnimate){               document.getElementById("start").style.cursor = "not-allowed"               isAnimate = true;               var angleRotation = 0;               var cnavas = document.getElementById("canvas");               var ranmodNum = (Math.round(Math.random()*7)+1);               currIndex = ranmodNum;               angleRotation = (ranmodNum-earlyIndex)*rotateAngel;               $deg = $deg%rotateAngel==0?($deg  + 1080 - angleRotation + rotateAngel/2):($deg = $deg  +  1080 -angleRotation);               cnavas.style.cssText = "transform: rotate("+$deg+"deg);transition: all 3s;"               setTimeout(function(){                   document.getElementById("start").style.cursor = "pointer"                   earlyIndex = currIndex;                   isAnimate = false;                   document.getElementById('winData').innerText = arr[ranmodNum-1].text;               },3000);           }         }         var $canvas = document.getElementById("canvas");         var ctx = $canvas.getContext("2d");         var $width = parseInt(document.documentElement.clientWidth*0.9);         $canvas.width = $width;         $canvas.height = $width;         var $param = {             w : $width,             h : $width,             r : $width/2,             num : arr.length         }         console.log("当前屏幕的宽度----"+JSON.stringify($param));         var ctx = $this.el().getContext("2d");         // 外圆         ctx.beginPath();         ctx.lineWidth =  $param.r*0.13;         ctx.strokeStyle = "#df1e15";         ctx.arc($param.r,$param.r,$param.r*0.9,0,2*Math.PI,false);         ctx.stroke();         ctx.closePath();                //内圆          ctx.beginPath();         ctx.lineWidth = $param.r*0.13;         ctx.strokeStyle = "#f4ad26";         ctx.arc($param.r,$param.r,$param.r*0.76,0,2*Math.PI,false);         ctx.stroke();         ctx.closePath();     //    // 12个小圆         for (var i = 0; i < 12; i++) {           ctx.save();           ctx.beginPath();           ctx.fillStyle = i%2==0?"#fbb936":"#fbf0a9";           ctx.shadowColor = "#ddd";           ctx.shadowBlur = 10;           ctx.translate($param.r, $param.r);           ctx.rotate(30 * i * Math.PI / 180);           ctx.arc($param.r*0.6,$param.r*0.6,10,0,2*Math.PI,false);           ctx.fill();           ctx.closePath();           ctx.restore();         }                 var sector = 8;         // 12份扇形         for (var j = 0; j < $param.num; j++) {           ctx.save();           ctx.beginPath();           ctx.fillStyle = j%2==0?"#fbb936":"#fbf0a9";           ctx.moveTo($param.r,$param.r);           ctx.arc($param.r,$param.r,$param.r*0.7,360/sector * j * Math.PI / 180,360/sector * (j+1) * Math.PI / 180,false);           ctx.fill();           ctx.closePath();           ctx.restore();         }         var angel = (2 * Math.PI / 360) * (360 / $param.num);         var startAngel = angel / 2         var awardPic = [];         function loadImg(callback){             var count = 0;             for (var m = 0; m < $param.num; m++) {               var img = new Image();               img.src=arr[m].img_url;               awardPic.push(img);               img.onload = function(){                 callback();               }             }         }         function drawImg(){            var angel = (2 * Math.PI / 360) * (360 / $param.num);            var startAngel = angel / 2            for (var n = 0; n < $param.num; n++) {               ctx.save();               ctx.beginPath();               ctx.translate($param.r,$param.r);               ctx.rotate(startAngel);               // ctx.rotate(startAngel);               ctx.drawImage(awardPic[n],-$param.r*0.15,-$param.r*0.58,$param.r*0.3,$param.r*0.25);               startAngel += angel;               ctx.closePath();               ctx.restore();            }         }         loadImg(drawImg);                 for (var k = 0; k < $param.num; k++) {           ctx.save();           ctx.translate($param.r,$param.r);           // ctx.drawImage(img, -28, -120);           ctx.rotate(startAngel)           ctx.font = "0.8rem 微软雅黑";           ctx.fillStyle = "white";           ctx.textAlign = "center";           ctx.textBaseline = "middle";           ctx.fillText(arr[k].text, 0, -$param.r*0.6);           startAngel += angel           ctx.restore();         }

刮刮乐:

view布局:

<div class="box"> <img src="images/a.png" alt="" width="120"> <canvas id="canvas"></canvas> </div>

js实现:

(function(){ // 事件绑定 window.bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) { // elem:节点 type:事件类型 handler:事件处理函数 // 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意:ie没有这个参数 elem.addEventListener(type, handler, false); } } else if (window.attachEvent) {// IE浏览器 return function(elem, type, handler) { elem.attachEvent("on" + type, handler); } } }()); // 事件解除 window.removeHandler = (function() { if (window.removeEventListener) { // 标准浏览器 return function(elem, type, handler) { elem.removeEventListener(type, handler, false); } } else if (window.detachEvent) {// IE浏览器 return function(elem, type, handler) { elem.detachEvent("on" + type, handler); } } }()); }()); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var brush=function(){//刮奖 context.clearRect(event.offsetX,event.offsetY,20,20); }; context.fillStyle='#A9AB9D'; context.fillRect(0,0,300,180); context.fillStyle='#000'; context.font='50px Arial'; context.fillText('刮奖区',75,115); //2. 为canvas元素onmousedown和onmouseup事件 canvas.onmousedown = function(){ // 鼠标按下时 - 绑定鼠标跟随事件 bindHandler(canvas,'mousemove',brush,false); } canvas.onmouseup = function(){ // 停止刮奖功能 - 解绑鼠标跟随事件 removeHandler(canvas,"mousemove",brush,false); }

转载请注明原文地址: https://www.6miu.com/read-2450344.html

最新回复(0)