canvas实现转盘抽奖、刮刮乐

最新推荐文章于 2025-06-20 23:46:32 发布

koga007

最新推荐文章于 2025-06-20 23:46:32 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35504206/article/details/80606367

本文介绍如何使用HTML5的Canvas绘制一个抽奖转盘，并实现刮刮乐效果。通过JavaScript控制转盘的旋转和停止，同时加载图片并显示奖项。此外，还实现了基于鼠标事件的刮刮乐互动体验。

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);
    }