使用Canvas绘图大转盘抽奖功能

最新推荐文章于 2021-07-08 10:42:08 发布
最新推荐文章于 2021-07-08 10:42:08 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： Html5 文章标签： html5 css3 javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xionghui2007/article/details/54586677
版权

换个方式绘制转盘图，抽奖


截图：



代码：

<!DOCTYPE HTML>
<html>


<head>
<meta charset="utf-8">
<title>Canvas绘图大转盘抽奖功能</title>
<script type="text/javascript">
//用原生的js的时候我们通常用onload
window.onload = function() {
//访问ID对象myCanvas
var c = document.getElementById("item");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#EB826B"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "5"; //lineWidth 设置或返回当前的线条宽度。
//园的绘制
//arc(x,y,r,start,stop)
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.arc(250, 250, 205, 0, 2 * Math.PI);
ctx.stroke();



//路径绘制，扇形圆弧1/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEF1CB"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(450, 250);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 0 * Math.PI / 180, 60 * Math.PI / 180);
ctx.lineTo(350, 423.4);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。



//路径绘制，扇形圆弧2/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEE9A7"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(350, 423.4);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 60 * Math.PI / 180, 120 * Math.PI / 180);
ctx.lineTo(150, 423.4);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。

//路径绘制，扇形圆弧3/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEF1CB"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(150, 423.4);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 120 * Math.PI / 180, 180 * Math.PI / 180);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。



//路径绘制，扇形圆弧4/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEE9A7"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(50, 250);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 180 * Math.PI / 180, 240 * Math.PI / 180);
ctx.lineTo(150, 76.7);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。



//路径绘制，扇形圆弧5/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEF1CB"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(150, 76.7);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 240 * Math.PI / 180, 300 * Math.PI / 180);
ctx.lineTo(350, 76.7);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。



//路径绘制，扇形圆弧6/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEE9A7"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(350, 76.7);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 300 * Math.PI / 180, 360 * Math.PI / 180);
ctx.lineTo(450, 250);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。

//锁画布(为了保存之前的画布状态)
ctx.save();
//重置画布并旋转文本
ctx.translate(800, 150);
ctx.rotate(120 * Math.PI / 180);
//设置奖品描述1
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("京东券15元", 300, 300);


ctx.translate(650, -50);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述2
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("金币", 240, 370);


ctx.translate(550, 150);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述3
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("京东券5元", 100, 300);



ctx.translate(350, 120);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述4
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("理财代金券", 100, 200);

ctx.translate(270, -30);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述5
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("京东券30元", 200, 150);

ctx.translate(350, -200);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述6
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("理财加息券", 300, 200);

//锁画布(为了保存之前的画布状态)
ctx.save();


//绘制指针
var c2 = document.getElementById("point");
var ctx2 = c2.getContext("2d");
ctx2.fillStyle = "red"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx2.moveTo(100, 0);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx2.arc(50, 50, 50, 0 * Math.PI / 180, 270 * Math.PI / 180);
ctx2.lineTo(50, 0);
ctx2.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx2.stroke();
ctx2.fill(); //填充当前绘图（路径）。


//document.getElementById("pointer")：访问ID对象，onclick 点击事件
document.getElementById("pointer").onclick = function() {
var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数
document.getElementById("item").style.transform = 'rotate(' + num + 'deg)';
// alert(num);
num %= 360; //num=num%360;摩以360后的余数，
//得到一个1至360的数值，进行转盘分成几分的判断
//设定旋转变换3秒后执行下面的提示
setTimeout(function() {
if(num <= 60.0 * 1+30.0) {
alert('理财代金券');
} else if(num <= 60.0 * 2+30.0) {
alert('京东券5元');
} else if(num <= 60.0 * 3+30.0) {
alert('金币');
} else if(num <= 60.0 * 4+30.0) {
alert('京东券15元');
} else if(num <= 60.0 * 5+30.0) {
alert('理财加息券');
} else if(num <= 60.0 * 6+30.0) {
alert('京东券30元');
}
}, 3000);


}
}
</script>
<style type="text/css">
/*背景容器*/
#banner {
width: 600px;
height: 600px;
margin: 10px auto;
padding: 0;
overflow: hidden;
position: relative;
background-color: greenyellow;
}
/*转盘容器*/
#turnplate {
width: 500px;
height: 500px;
position: absolute;
top: 50px;
left: 50px;
}
/*转盘画布*/
#turnplate #item{
transition: all 3s ease-out ;
}
/*指针容器*/
#pointer{
width: 100px;
height: 100px;
position: absolute;
top: 250px;
left: 250px;
cursor: pointer;
transform: rotate(-45deg);
}
</style>
</head>


<body>
<div id="banner">
<div id="turnplate">
<canvas id="item" width="500px" height="500px"></canvas>
</div>
<div id="pointer">
<canvas id="point" width="100px" height="100px"></canvas>
</div>
</div>
</body>


</html>

PandaCode辉
关注
专栏目录
H5 Canvas实现转盘效果，控制指定数字
℡メ㏑╭ァ小凯
07-05 234
用Canvas画圆，然后再画扇形，然后中奖的开始用一张图片代替，点击的时候触发转动效果。
canvas实现微信大转盘抽奖
12-20
canvas实现微信大转盘抽奖
HTML5 Canvas绘制转盘抽奖
07-25
如何通过HTML5 Canvas实现转盘抽奖。
canvas实现转盘抽奖的绘制
10-22
采用canvas的绘制转盘图像，设置转速，以及可以更改奖项设置，
利用canvas实现抽奖转盘
weixin_30781631的博客
04-19 214
之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。 功能需求 转盘要美观，转动效果流畅。 转盘上需要显示奖品图片，并且奖品是后台读取的照片和名字。 转动动画完成后要有相应提示。 获取的奖品具体算法在数据库里操作，前端只提供最后的效果展示。 知识要点 引用了一个jq插件：awardRotate...
使用canvas做一个抽奖转盘
jacoby_fire的博客
01-16 3981
最近，公司在每周五下午会有一次个人分享沙龙。上周我自愿参加了，因为每周都是由当前主讲人来决定下次的主讲人，于是就有做一个抽奖页面的想法，话不多说，先看效果。 点击抽奖之后，转盘的速度会由慢到快，然后由快到慢再停止，整个过程持续时间是3s,下面是代码 html lang="en"> head> meta charset="UTF-8"> title>抽奖title>
html5Canvas微信大转盘抽奖
06-04
在本项目"html5Canvas微信大转盘抽奖"中，我们利用Canvas API构建了一个用于微信平台的动态抽奖转盘。这个功能通常应用于线上活动或营销推广，能够吸引用户参与，增加互动性。 首先，我们需要了解Canvas的基本概念...
HTML5 Canvas指针大转盘抽奖代码.zip
07-11
在这个“HTML5 Canvas指针大转盘抽奖代码”项目中，开发者利用Canvas API构建了一个动态的、可定制化的抽奖转盘，用于创建吸引用户参与的互动体验。 一、Canvas基本概念 Canvas是HTML5引入的一个绘图元素，通过...
HTML5 Canvas大转盘抽奖特效
06-24
HTML5 Canvas大转盘抽奖特效是一种利用HTML5的Canvas元素构建的交互式网页组件，它为网站或应用程序提供了丰富的动态视觉效果，使用户能够参与抽奖活动。Canvas是HTML5的一个重要特性，允许开发者在网页上绘制图形，...
HTML5 Canvas指针大转盘抽奖特效代码
03-20
总的来说，HTML5 Canvas指针大转盘抽奖特效展示了Canvas的强大功能，通过JavaScript实现了动态图形和互动效果，为Web应用添加了丰富的视觉和交互体验。学习并掌握这样的技术，对于提升网页开发者的技能水平和创新...
微信小程序利用canvas 绘制幸运大转盘功能
08-27
在微信小程序中，利用canvas组件实现幸运大转盘的功能是一项常见的需求，这通常用于抽奖或者游戏等场景。本文将详细讲解如何使用canvas API来完成这一功能。 首先，我们需要理解canvas的基本概念。canvas是HTML5...
js HTML5 Canvas绘制转盘抽奖
10-21
主要为大家详细介绍了js HTML5 Canvas绘制转盘抽奖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5 Canvas 微信大转盘抽奖特效.rar
07-10
HTML5 Canvas实现微信大转盘抽奖特效，点击圆盘中心的“开始抽奖”按钮，抽奖就开始了，转盘指针旋转，最后指向的地方就是抽奖结果。不过这里要说明一下，本特效只是实现抽奖的前台部分，基于HTML5编写的，若要真正实现抽奖结果的保存，需要动态网页脚本的支撑，本例中使用了JSP来处理抽奖结果，可修改成PHP或.NET版本的，若无这引起后台支撑程序，抽奖结果不能保存。
canvas转盘抽奖特效
02-12
jquery的canvas转盘抽奖特效，支持快速抽奖后慢停。且其是基于jquery的，无需其他外部插件，能够很轻松的集成
HTML5 canvas实现转盘游戏
02-09
HTML5之纯canvas实现转盘游戏，用到了canvas的旋转，平移，叠加，清除
Canvas绘制抽奖转盘
越陌度阡
06-16 1874
给大家分享一个Canvas绘制的转盘抽奖，点击开关开始转动时，转盘开始转动，转盘停止时指针指向的区域即为抽中的奖品，并显示在转盘中间，效果图如下： 动画实的代码如下： <!DOCTYPE html> <html> <head> <style> canvas { background: #ee......
使用canvas绘制转盘抽奖
baozaobenren的博客
07-08 206
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
canvas 基础系列（二）之实现大转盘抽奖
weixin_33937499的博客
08-15 438
上一章讲解了如何使用 canvas 实现刮刮卡抽奖，以及 canvas 最基本最基本的一些 api 方法。点击回顾本章开始一步一步带着读者实现大转盘抽奖；大转盘是个非常简单且实用的 web 特效，五脏俱全，其中涉及到的知识点有 圆的绘制及非零环绕原则，路径的绘制，canvas transform，逐帧动画 requestAnimationFrame 方法；接下来带大家一步一步的实现。 项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值