HTML5 Canvas圆盘抽奖应用（适用于Vue项目） - 嘉爷 - 博客园
; "复制代码")
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style> * { padding: 0px; margin: 0px; font-size: 16px; font-family: "Microsoft YaHei";
} .xttblog_box { width: 300px; height: 300px; margin: 100px auto; position: relative;
} .xttblog_box canvas { position: absolute;
} #xttblog { background-color: white; border-radius: 100%;
} #xttblog01,
#xttblog03 { left: 50px; top: 50px; z-index: 30;
} #xttblog02 { left: 75px; top: 75px; z-index: 20;
} #xttblog { -o-transform: transform 6s; -ms-transform: transform 6s; -moz-transform: transform 6s; -webkit-transform: transform 6s; transition: transform 6s; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
} .taoge_btn { width: 60px; height: 60px; left: 120px; top: 120px; border-radius: 100%; position: absolute; cursor: pointer; border: none; background: transparent; outline: none; z-index: 40;
}</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js";></script>
<script> $(document).ready(function () { //旋转角度
var angles; //旋转次数
var rotNum = 0; //中奖公告
var notice = null; //转盘初始化各样式颜色
var color = \["#ffefbf", "#ffbb04", "#e72c2c", "#DCC722", "#f4a005", "#cb1418"\]; // 后台获取奖品替换数据
var info = \["1", "2", " 3", " 4", " 5", " 6"\];
canvasRun();
$('#tupBtn').bind('click', function () { //转盘旋转runCup(); //转盘旋转过程“开始抽奖”按钮无法点击
$('#tupBtn').attr("disabled", true); //“开始抽奖”按钮无法点击恢复点击
setTimeout(function () {
alert('中奖拉')
$('#tupBtn').removeAttr("disabled", true);
}, 6000);
}); //转盘旋转
function runCup() { var num = null
//获取随机数0-5 取回获奖数据下标代替 此处获取获奖数据使用异步方法
var num = parseInt(Math.random() * (5 - 0 + 0) + 0); // 记录旋转的次数，依次叠加旋转度数，防止往回倒转 transform属性的值必须依次增加，否则会发生倒转rotNum = rotNum + 1
if(num !== null) { // 旋转角度 = 旋转6圈（2160度）* 已经旋转的次数 + 最少旋转的圈数（5圈）+ 每个奖品下标对应的角度angles = 2160 rotNum + 1800 + 360 / info.length (info.length - num);
} else {
angles = 2160 * rotNum + 1800 } var degValue = 'rotate(' + angles + 'deg' + ')';
$('#xttblog').css('transform', degValue); // 如果没有获取到获奖数据继续转动
if(num === null) {
runCup();
}
} //绘制转盘
function canvasRun() { var canvas = document.getElementById('xttblog'); var canvas01 = document.getElementById('xttblog01'); var canvas03 = document.getElementById('xttblog03'); var canvas02 = document.getElementById('xttblog02'); var ctx = canvas.getContext('2d'); var ctx1 = canvas01.getContext('2d'); var ctx3 = canvas03.getContext('2d'); var ctx2 = canvas02.getContext('2d');
createCircle();
createCirText(); // 绘制文字initPoint(); // 绘制指针
//外圆
function createCircle() { var startAngle = 0; //扇形的开始弧度
var endAngle = 0; //扇形的终止弧度
//画一个等份扇形组成的圆形
for (var i = 0; i < info.length; i++) {
startAngle = Math.PI * (i / (info.length / 2) - 2 / info.length);
endAngle = startAngle + Math.PI * (1 / (info.length / 2));
ctx.save(); // 保存备份ctx.beginPath(); // 绘制两条线
ctx.arc(150, 150, 100, startAngle, endAngle, false); // 绘制圆
ctx.lineWidth = 120; if (i % 2 == 0) { // 绘制颜色
ctx.strokeStyle = color[1];
} else {
ctx.strokeStyle = color\[0\];
}
ctx.stroke();
ctx.restore();
}
} //各奖项
function createCirText() {
ctx.textAlign = 'start';
ctx.textBaseline = 'middle';
ctx.fillStyle = color\[3\]; var step = 2 * Math.PI / info.length; for (var i = 0; i < 6; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(150, 150);
ctx.rotate(i * step);
ctx.font = " 20px Microsoft YaHei";
ctx.fillStyle = color\[3\];
ctx.fillText(info\[i\], -30, -100, 60); // 书写转盘文字ctx.font = " 14px Microsoft YaHei";
ctx.closePath();
ctx.restore();
}
} //箭头指针
function initPoint() { //箭头指针ctx1.beginPath();
ctx1.moveTo(100, 24);
ctx1.lineTo(90, 62);
ctx1.lineTo(110, 62);
ctx1.lineTo(100, 24);
ctx1.fillStyle = color\[5\]; // 指针颜色ctx1.fill();
ctx1.closePath(); //中间圆圈ctx2.beginPath();
ctx2.arc(75, 75, 50, 0, Math.PI * 2, false); // 创建一个圆ctx2.fillStyle = color[2]; // 颜色
ctx2.fill();
ctx2.closePath(); //中间小圆ctx3.beginPath();
ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
ctx3.fillStyle = color\[5\];
ctx3.fill();
ctx3.closePath(); //小圆文字ctx3.font = "Bold 20px Microsoft YaHei";
ctx3.textAlign = 'start';
ctx3.textBaseline = 'middle';
ctx3.fillStyle = color\[4\]; //抽奖文字颜色ctx3.beginPath();
ctx3.fillText('开始', 80, 90, 40);
ctx3.fillText('抽奖', 80, 110, 40);
ctx3.fill();
ctx3.closePath();
}
}
}); </script></head>
<body>
<div class="xttblog_box">
<canvas id="xttblog" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
<canvas id="xttblog01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
<canvas id="xttblog03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
<canvas id="xttblog02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
<button id="tupBtn" class="taoge_btn"></button></div>
</body>
</html>
; "复制代码")
参考其他demo : http://www.html5tricks.com/html5-canvas-choujiang.html
原网址: 访问
创建于: 2019-01-02 22:42:32
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论