首页 / CANVAS / canvas转盘抽奖的实现(一)

canvas转盘抽奖的实现(一)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了canvas转盘抽奖的实现(一)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7912字，纯文字阅读大概需要12分钟。

内容图文

网络上已经有了很多转盘抽奖的代码，但大多是用jQuery插件实现的，其中的原理比较难弄明白，于是自己摸索了一个。最终效果如下：

实现步骤：

1.根据奖品数量绘制转盘

            var      r1 = 200,    //外圆半径
         r2 = 160,    //奖品文字距离圆心的位置
         r3 = 60,    //中心按钮半径
         centerX = c.width / 2,    //中点
         centerY = c.height / 2,
         PI = Math.PI,
         prizeList = [‘一等奖‘,‘二等奖‘,‘三等奖‘,‘四等奖‘,‘五等奖‘,‘六等奖‘,‘七等奖‘,‘八等奖‘],    //奖品列表
         colorList = [‘#ffffff‘,‘#FDFAC3‘,‘#ffffff‘,‘#FDFAC3‘,‘#ffffff‘,‘#FDFAC3‘,‘#ffffff‘,‘#FDFAC3‘],    //奖品对应的背景颜色
         lenPrize = prizeList.length,
         startAngle = 0,  //开始绘制时的起始角度
         piece = 2 * PI / lenPrize;    //根据奖品数量划分区域，单位为弧度

            //
            绘制分区
            for (var i = 0; i < lenPrize; i++) {
    ctx.fillStyle = colorList[i];
    var angle = startAngle + piece * i;
    ctx.beginPath();
    //设置圆心为起点，方便closePath()自动闭合路径    ctx.moveTo(centerX, centerY);
    //分块绘制，目的是方便填充颜色，如果以lineTo的形式绘制，在填充颜色时会很麻烦
    ctx.arc(centerX, centerY, r1, angle, angle + piece, false);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
        
    //绘制奖品说明    ctx.save();
    ctx.font = ‘30px Microsoft YaHei‘;
    ctx.fillStyle = ‘#d60000‘;
    ctx.translate(centerX + Math.cos(angle + piece / 2) * r2, centerY + Math.sin(angle + piece / 2) * r2);
    ctx.rotate(angle + piece / 2 + PI / 2);

    var s = prizeList[i].split(‘‘);
    for (var j = 0; j < s.length; j++) {
        var text = s[j];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 32 * j);
    }
    ctx.restore();       
}

这一部分代码的效果如下：

技术分享

图一

要注意首个奖品说明的位置，也就是一等奖的位置，是从三点钟方向开始的，这是arc()方法的规定，下面这张图表示从1到N按顺序绘制。

技术分享

图二

接下来绘制箭头和中心圆：

            //
            绘制箭头
ctx.strokeStyle = ‘#FF5722‘;
ctx.fillStyle = ‘#FF5722‘;
ctx.save();
ctx.translate(centerX, centerY - 40);
ctx.moveTo( - 10, 0);
ctx.beginPath();
ctx.lineTo( - 10, 0);
ctx.lineTo( - 10, -30);
ctx.lineTo( - 20, -30);
ctx.lineTo(0, -50);
ctx.lineTo(20, -30);
ctx.lineTo(10, -30);
ctx.lineTo(10, 0);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();

//绘制中心圆
ctx.fillStyle = ‘#FF5722‘;
ctx.beginPath();
ctx.arc(centerX, centerY, r3, 0, 2 * PI, false);
ctx.closePath();
ctx.fill();
ctx.stroke();

//绘制抽奖文字
ctx.font = ‘30px Microsoft YaHei‘;
ctx.fillStyle = ‘#fff‘;
ctx.save();
ctx.translate(centerX, centerY);
ctx.fillText("抽奖", -ctx.measureText(text).width, 10);
ctx.restore();

这就是最终效果

技术分享

最后实现转盘的转动，先定义几个变量：

            var currentTime = 0,  //表示动画开始到现在持续的时间
    totalTime = Math.random() * 500 + 4000,   //动画总时间

    finalValue = Math.random() * 20 + 20,//动画总时间内期望的位移总量，越大转得越快，因为总时间一定，只有加快速度才能在规定时间内到达期望位移
　　 t; //setTimeout Id

转盘转动方法：

            function
             rotation() {
    currentTime += 30;    //每帧增加30的运行时间if (currentTime >= totalTime) {//到达总时间后停止动画        stopRotation();
        return;
    }
    //缓动var currentAngle = finalValue - easeOut(currentTime, 0, finalValue, totalTime);

    //弧度随时间递增，但增速由快变慢
    startAngle += currentAngle * PI / 180;
    
    //根据startAngle的变化重新绘制转盘，以达到转动的效果    draw();

    t = setTimeout(rotation, 17);
}

停止转盘：

            function
             stopRotation() {
    clearTimeout(t);
    
            //
            动画时间内转动的总弧度，因为是从三点钟方向开始绘制的，所以应当加上PI/2
            var arc = startAngle + PI / 2,
    //arc模2*PI以计算转动整圈以外不满一圈的零数//零数除以单位弧度，表示转动了几个单位，不满整数则向下取整(Math.floor)//奖品数量(以下标算，故先减1)减去转动过的单位得到当前指针所指奖品的索引
    index = lenPrize - 1 - ((arc % (2 * PI) / piece) >> 0);

    result.innerHTML = ‘<strong style="font-size:26px; color:#f00">‘ + prizeList[index] + ‘</strong>‘;
}

技术分享

全部代码：

                  1
                <
                 !DOCTYPE 
                html 
                >
                  2
                <
                html 
                lang 
                = "en"
                >
                  3
                <
                head 
                >
                  4
                <
                meta 
                charset 
                = "UTF-8"
                >
                  5
                <
                title
                > Document </title>  6<style>  7    body{margin: 0; font:12px Arial; background-color: #fff}  8    .canvas_container{  9        position: relative; 10        width: 500px; 11        height: 500px; 12} 13    #run{ 14        position: absolute; 15        width: 120px; 16        height: 120px; 17        cursor: pointer; 18        left: 190px; 19        top: 190px; 20} 21</style ></head> 22<body> 23<div class="canvas_container"> 24<div id="run"></div ><canvas id = "c"width = "500"height = "500"></canvas> 25</div ><div id = "result"></div> 26 27<script> 28var c = document.getElementById(‘c‘),
 29         ctx = c.getContext("2d"),
 30         r1 =200,    // 外圆半径r2 =160,
 31//文字所在位置半径 32r3 =60,
 33//中心按钮 34centerX = c.width /2,
 35//中点 36centerY = c.height /2,
 37PI = Math.PI;
 38 39var prizeList = [‘一等奖‘, ‘二等奖‘, ‘三等奖‘, ‘四等奖‘, ‘五等奖‘, ‘六等奖‘, ‘七等奖‘, ‘八等奖‘],
 40colorList = [‘#ffffff‘, ‘#FDFAC3‘, ‘#ffffff‘, ‘#FDFAC3‘, ‘#ffffff‘, ‘#FDFAC3‘, ‘#ffffff‘, ‘#FDFAC3‘],
 41lenPrize = prizeList.length,
 42lenColor = colorList.length,
 43piece =2* PI / lenPrize,
 44//根据奖品数量划分区域，单位弧度 45startAngle =0; //起始角度 46function draw() {
 47    ctx.clearRect(0, 0, c.width, c.height);
 48 49    ctx.lineWidth =0.5;
 50    ctx.strokeStyle =‘#AF4760‘;
 51 52//绘制分区 53for (var i =0; i < lenPrize; i++) {
 54        ctx.fillStyle = colorList[i];
 55var angle = startAngle + piece * i;
 56        ctx.beginPath();
 57        ctx.moveTo(centerX, centerY);
 58//分块绘制，目的是方便填充颜色，如果以lineTo的形式绘制，在填充颜色时会很麻烦 59        ctx.arc(centerX, centerY, r1, angle, angle + piece, false);
 60        ctx.closePath();
 61        ctx.fill();
 62        ctx.stroke();
 63 64//绘制奖品说明 65        ctx.save();
 66        ctx.font =‘30px Microsoft YaHei‘;
 67        ctx.fillStyle =‘#d60000‘;
 68        ctx.translate(centerX + Math.cos(angle + piece /2) * r2, centerY + Math.sin(angle + piece /2) * r2);
 69        ctx.rotate(angle + piece /2+ PI /2);
 70 71var s = prizeList[i].split(‘‘);
 72for (var j =0; j < s.length; j++) {
 73var text = s[j];
 74            ctx.fillText(text, -ctx.measureText(text).width /2, 32* j);
 75        }
 76        ctx.restore();
 77    }
 78 79//绘制箭头 80    ctx.strokeStyle =‘#FF5722‘;
 81    ctx.fillStyle =‘#FF5722‘;
 82    ctx.save();
 83    ctx.translate(centerX, centerY -40);
 84    ctx.moveTo( -10, 0);
 85    ctx.beginPath();
 86    ctx.lineTo( -10, 0);
 87    ctx.lineTo( -10, -30);
 88    ctx.lineTo( -20, -30);
 89    ctx.lineTo(0, -50);
 90    ctx.lineTo(20, -30);
 91    ctx.lineTo(10, -30);
 92    ctx.lineTo(10, 0);
 93    ctx.closePath();
 94    ctx.fill();
 95    ctx.stroke();
 96    ctx.restore();
 97 98//绘制中心圆 99    ctx.fillStyle =‘#FF5722‘;
100    ctx.beginPath();
101    ctx.arc(centerX, centerY, r3, 0, 2* PI, false);
102    ctx.closePath();
103    ctx.fill();
104    ctx.stroke();
105106//绘制抽奖文字107    ctx.font =‘30px Microsoft YaHei‘;
108    ctx.fillStyle =‘#fff‘;
109    ctx.save();
110    ctx.translate(centerX, centerY);
111    ctx.fillText("抽奖", -ctx.measureText(text).width, 10);
112    ctx.restore();
113114}
115116var currentTime =0,
117totalTime = Math.random() *500+4000,
118finalValue = Math.random() *20+20,
119//终点值120t;
121122function rotation() {
123    currentTime +=30;
124if (currentTime >= totalTime) {
125        stopRotation();
126return;
127    }
128129var currentAngle = finalValue - easeOut(currentTime, 0, finalValue, totalTime);
130131//弧度随时间递增，但增速由快变慢132    startAngle += currentAngle * PI /180;
133    draw();
134135    t = setTimeout(rotation, 17);
136}
137138function stopRotation() {
139    clearTimeout(t);
140141var arc = startAngle + PI /2,
142    index = lenPrize -1- ((arc % (2* PI) / piece) >>0);
143144    result.innerHTML =‘<strong style="font-size:26px; color:#f00">‘+ prizeList[index] +‘</strong>‘;
145}
146draw();
147//rotation();148var run = document.getElementById(‘run‘),
149result = document.getElementById(‘result‘);
150run.onclick =function() {
151    currentTime =0;
152    totalTime = Math.random() *500+4000;
153    finalValue = Math.random() *20+20;
154    rotation();
155};
156157/*158        t: current time(当前时间)
159        b: beginning value(初始值)
160        c: change in value(变化总量)
161        d: duration(持续时间)
162*/163function easeOut(t, b, c, d) {
164return- c * (t /= d) * (t - 2) + b;165}
166167</script>168</body >169</html>

View Code

原文：http://www.cnblogs.com/undefined000/p/canvas-turntable.html

内容总结

以上是互联网集市为您收集整理的canvas转盘抽奖的实现(一)全部内容，希望文章能够帮你解决canvas转盘抽奖的实现(一)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1062958.html

来源：【匿名】

【上一篇】使用 canvas 画图时图像文字模糊的解决办法【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【canvas转盘抽奖的实现(一)】教程文章相关的互联网学习教程文章

用canvas 实现个图片三角化（LOW POLY）效果【代码】【图】

之前无意中看到Ovilia?用threejs做了个LOW POLY，也就是图片平面三角化的效果，觉得很惊艳，然后就自己花了点时间尝试了一下。　　我是没怎么用过threejs，所以就直接用canvas的2d绘图API来做，因为感觉似乎这效果也用不上threejs。　　直接上demo先：http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html? ?（也可以在移动端看，不过因为计算量比较大，移动设备计算起来会比PC要多花些时间。）　　做这种效果...

canvas实现简单的画图工具中画笔效果【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>canvas实现简单的画图工具中画笔效果</title> </head> <body><canvas width="500" height="500" style="background:#eee;"></canvas><script>var canvas = document.getElementsByTagName(‘canvas‘)[0];var con = canvas.getContext(‘2d‘);canvas.onmousedown = function(e){var mx = e.layerX,my = e.layerY;con.moveTo(mx,my);canvas.onmousemove = fu...

----uni-app之用canvas画二维码实现分享----【图】

原文：https://www.cnblogs.com/followme789/p/10881453.html

html5 canvas 实现倒计时功能【代码】【图】

function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //填充色day: 0,time: 0,minute: 0,seconds: 0}if (a) {b = $.extend(b, a);}this.total = 0;this.id = b.id;this.x = b.x;this.y = b.y;this.radius = b.radius;this.angle = b.angl...

基于HTML5的Canvas技术实现前端的图片压缩【代码】

Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。　　HTML代...

canvas离屏技术与放大镜实现【代码】

教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步> （原文）canvas 离屏技术与放大镜实现' ref='nofollow'>>>> （原文）canvas 离屏技术与放大镜实现。更多讨论或者错误提交，也请移步。利用canvas除了可以实现滤镜，还可以利用离屏技术放大镜功能。为了方便讲解，本文分为 2 个应用部分：实现水印和中心缩放实现放大镜1. 什么是离屏技术？canvas 学习和滤镜实现介绍过drawImage接口。除了绘制图像，这个接口还可以：将...

Canvas实现曲线运动【代码】【图】

前言 Html5添加的最受欢迎的功能就是<canvas>元素，它负责在页面中设定一个区域，然后在里面可以通过javascript动态地在其内绘制图形。主流浏览器，IE9+，手机端都是支持它的。创建Canvas 要使用Canvas元素就必须先设置其width和height，指定绘图区域的大小类似：<canvas id="canvas" width="800" height="800"/> 如果要在这块画布上绘图的话，首先要取得绘图上下文,需调用getContext（）方法 var canvas=...

HTML5 组件Canvas实现图像灰度化【代码】

1. 新建一个html页面，在body tag之间加入<canvas id="myCanvas">Gray Filter</canvas> 2. 添加一段最简单的JavaScript代码：window.onload = function() { var canvas = document.getElementById("myCanvas");// do something here!!} 从Canvas对象获取绘制对象上下文Context的代码如下：var context = canvas.getContext("2d"); 在html页面中加入一幅图像的html代码如下:<img id="imageSource" src="hanjiaren.jpg" alt="Canvas ...

canvas实现的红包照片自适应效果【图】

效果图650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108043642828.jpg" title="QQ截图20170123114655.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108043643284.jpg" title="QQ截图20170123114704.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/8/20221108043644413.jpg" title="QQ截图20170123114719.png" />650) this.width=650;" src="/upl...

Canvas实现图片放大缩小移动操作【代码】【图】

对于HTML5相信大家都不陌生，很早就出来了，但是貌似都没有真正的使用过。最近做项目时要实现这样一个需求：一个图片，大小不固定，要求能实现类似地图一样放大、缩小、移动功能。这里就很合适使用html5的canvas画布。实现步骤如下：1. 定义一个canvas标签。<canvas id="bargraphCanvas" width="500" height="600"></canvas>这里有个很重要的地方，就是这个width和height一定要写，否则不能实现。同时，画布的宽高只能用这个方法写...

【效果】使用canvas rotate实现一个旋转的矩形【代码】

使用canvas rotate实现一个旋转的矩形，并且以矩形的中心为原点，围绕原点旋转：<canvas id="canvas" width="800" height="400"></canvas><script type="text/javascript">var canvas = document.getElementById(‘canvas‘);var ctx = canvas.getContext(‘2d‘);ctx.translate(400,200);setInterval(function(){ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果 ctx.b...

canvas实现刮图效果【代码】【图】

<canvas id="myCanvas" width=300 height=300></canvas>JavaScript代码:var canvas = document.getElementById(‘myCanvas‘),ctx = canvas.getContext(‘2d‘),w = canvas.width,h = canvas.height,area = w * h,flag=false,l = canvas.offsetLeft;t = canvas.offsetTop,ctx.fillStyle = "#ccc";//覆盖第一层(添加灰色涂层)ctx.fillRect(0, 0, w, h);//添加背景即为要刮开的图像canvas.style.backgroundImage = ‘url(banner.jpg...

HTML5 Canvas绘图系列之一：圆弧等基础图形的实现【代码】【图】

之前的一个微信项目已经要结项了，最近整理一下项目中使用较多的canvas画图方面的知识吧，打算写个3,4篇的样子。本篇主要介绍基础操作和弧线画法。之后再写一下趋势图，直方图，文本图像处理的。言归正传，canvas元素本身是一个容器元素，提供一块画布，用脚本来实现想要画什么。为了演示使用，我们新增一个空的aspx页。首先，我们新增一个canvas元素： <canvas id="myConvas" style="display:block; margin:...

PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法。分享给大家供大家参考。具体实现方法如下：一、问题：在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的...

CANVAS - 相关标签

canvas动画

CANVAS - 最热教程

javascript – 如何通过z-index对这些c...微信小程序利用Canvas绘制图片和竖排文...微信小程序使用CANVAS绘制图片及图片圆...Canvas跨域的解决方案介绍 HTML5 Canvas核心技术—图形、动画与游...Python3 tkinter基础 Canvas create_po...javascript – 使用图像创建Canvas元素...微信小程序简单的canvas裁剪图片功能详...Vue中使用canvas方法总结关于HTML5Canvas的事件处理

首页 / CANVAS / canvas转盘抽奖的实现(一)

canvas转盘抽奖的实现(一)

内容导读

内容图文

内容总结

内容备注

内容手机端

【canvas转盘抽奖的实现(一)】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程