H5-canvas-原生-编写俄罗斯转盘抽奖系统

先放上写好之后的样子

这里面的图片素材是我从别人的网站的拔下来的，如果需要删除的话请联系我哈。
为什么我要写这个呢，因为闲的，然后看见了这个东西，结果下载还要收费，我一想，算了吧，素材扒下来自己写一个。然后就有了后面的代码
这个是文件结构

下面直接上代码里面有注释
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>幸运大转盘</title><style>* {margin: 0;padding: 0;}.allCanvas {position: relative;width: 500px;height: 500px;margin: 50px auto;background-color: rgba(0, 0, 0, .1);}#canvasbg {position: absolute;z-index: 0;top: 0;left: 0;}#canvasboxs {position: absolute;z-index: 1;top: 0;left: 0;}#canvasbtn {position: absolute;z-index: 2;top: 180px;left: 180px;cursor: pointer;}</style>
</head>
<body>
<div class="allCanvas"><canvas id="canvasbg" width="500" height="500"></canvas><canvas id="canvasboxs" width="500" height="500"></canvas><canvas id="canvasbtn" width="140" height="140"></canvas>
</div>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
<script src="js/background.js"></script>
<script src="js/boxs.js"></script>
<script src="js/button.js"></script>
</body>
</html>

js/background.js

//背景渲染函数
function drawbg() {ctxbg.clearRect(-WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT);ctxbg.drawImage(imagebg, (-WIDTH / 2) + (WIDTH * 0.05), (-HEIGHT / 2) + (HEIGHT * 0.05), WIDTH * 0.9, HEIGHT * 0.9);
}

js/boxs.js

function drawboxs() {positionlist = [];ctxboxs.clearRect(-WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT);for (let i = 0; i < 8; i++) {fill(i);}
}function fill(num) {if (num % 2 == 0) {ctxboxs.fillStyle = "#F8C950";ctxboxs.strokeStyle = "#F8C950";} else {ctxboxs.fillStyle = "#FBFBE0";ctxboxs.strokeStyle = "#FBFBE0";}ctxboxs.beginPath();ctxboxs.moveTo(0, 0);ctxboxs.arc(0, 0, 190, num * (Math.PI / 4), (num + 1) * (Math.PI / 4));let obj = {a: {x: (190 * Math.cos((num * (Math.PI / 4)) + deg)),y: (190 * Math.sin((num * (Math.PI / 4)) + deg))},b: {x: (190 * Math.cos((num + 1) * (Math.PI / 4) + deg)),y: (190 * Math.sin((num + 1) * (Math.PI / 4) + deg))}};positionlist.push({x: (obj.a.x + obj.b.x) / 2,y: (obj.a.y + obj.b.y) / 2});ctxboxs.closePath();ctxboxs.stroke();ctxboxs.fill();filltext(num);
}function filltext(num) {ctxboxs.save();ctxboxs.rotate(Math.PI / 4 * num);ctxboxs.translate(Math.cos(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190), Math.sin(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190));ctxboxs.save();ctxboxs.rotate(Math.PI / 8 * 5);ctxboxs.textAlign = "center";ctxboxs.fillStyle = 'black';ctxboxs.fillText(boxlist[num], 0, 0);ctxboxs.restore();ctxboxs.save();ctxboxs.translate(Math.cos(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190) - 160, Math.sin(Math.PI / 8) * (Math.cos(Math.PI / 8) * 190) - 95);ctxboxs.rotate(Math.PI / 8 * 5);ctxboxs.drawImage(boximagelist[num], 0, 0, 60, 60);ctxboxs.restore();ctxboxs.restore();
}

js/button.js

function drawbtn() {ctxbtn.drawImage(imagejt, -imagejt.width * 0.15, -imagejt.height * 0.15, imagejt.width * 0.3, imagejt.height * 0.3);ctxbtn.drawImage(imagego, -imagego.width * 0.15, -imagego.height * 0.15, imagego.width * 0.3, imagego.height * 0.3);
}document.getElementById("canvasbtn").addEventListener("click", function () {begin();
});

js/common.js

window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function ( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {return window.setTimeout(callback, 1000 / 60);};
})();//开始游戏
function begin() {if (timer == null) {timer = setInterval(() => {if (speed < 20 && speedMax === 0) {speed += Math.random();} else if (speed > 20 && speedMax < 10) {speedMax += Math.random();} else if (speedMax >= 10 && speed > 1.1) {speed -= Math.random();} else {speed = 0;speedMax = 0;clearInterval(timer);timer = null;end();setTimeout(function () {speed = 0.1;}, 1000);}}, 100)}
}//结束游戏
function end() {space = [];for (let i = 0; i < positionlist.length; i++) {space.push((Math.pow(positionlist[i]["x"], 2) + Math.pow(positionlist[i]["y"] + 100, 2)))}alert(`恭喜你获得奖品：${boxlist[space.indexOf(Math.min(...space))]}`)
}

js/main.js

document.body.onload = game;//初始化函数var WIDTH = 500;//canvas的宽度
var HEIGHT = 500;//canvas的高度//背景画布
var canvasbg = document.getElementById("canvasbg");//背景画布
var ctxbg = null;//背景画布的画笔
var imagebg = new Image();//背景图片-圆//奖品画布
var canvasboxs = document.getElementById("canvasboxs");//奖品画布
var ctxboxs = null;//奖品画布的画笔
var boxlist = ["10元现金", "15元加油卡", "20元优惠券", "25元加油卡", "25元现金", "100元优惠券", "谢谢惠顾", "15元加油卡"];//奖品列表
var boximagelist = [new Image(), new Image(), new Image(), new Image(), new Image(), new Image(), new Image(), new Image()];//奖品图片列表
var positionlist = [];//确定位置
var space = [];//距离判断
var deg = 0;//总旋转度数
var speed = 0.1;//旋转速度
var speedMax = 0;//最大旋转速度
var timer = null;//旋转定时器//按钮画布
var canvasbtn = document.getElementById("canvasbtn");//按钮画布
var ctxbtn = null;//按钮画布的画笔
var imagego = new Image();//GO文字图
var imagejt = new Image();//按钮图function game() {init();loop();
}function init() {initbg();initboxs();initbtn();
}function loop() {requestAnimFrame(loop);ctxbg.rotate(0.3 * Math.PI / 180);drawbg();ctxboxs.rotate(speed * Math.PI / 180);deg += speed * Math.PI / 180;drawboxs();
}function initbg() {ctxbg = canvasbg.getContext("2d");ctxbg.translate(WIDTH / 2, HEIGHT / 2);imagebg.src = "./images/bg.png";
}function initboxs() {ctxboxs = canvasboxs.getContext("2d");ctxboxs.translate(WIDTH / 2, HEIGHT / 2);boximagelist[0].src = "./images/1.png";boximagelist[1].src = "./images/2.png";boximagelist[2].src = "./images/3.png";boximagelist[3].src = "./images/4.png";boximagelist[4].src = "./images/5.png";boximagelist[5].src = "./images/6.png";boximagelist[6].src = "./images/7.png";boximagelist[7].src = "./images/8.png";// drawboxs();
}function initbtn() {ctxbtn = canvasbtn.getContext("2d");imagego.src = "./images/go.png";imagejt.src = "./images/jt.png";ctxbtn.translate(70, 70);imagego.onload=function(){imagejt.onload = function () {drawbtn();}};
}

然后呢，图片素材的话，自己去找吧。出来的话还是挺好的。

H5-canvas-原生-编写俄罗斯转盘抽奖系统相关推荐

移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo 前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
Canvas实现微信大转盘抽奖代码
Canvas实现微信大转盘抽奖代码,canvas结合jquery实现的一款大转盘抽奖代码,奖品图片均由canvas绘制,可自定义奖项. jquery抽奖微信大转盘jquery抽奖转盘微信抽奖源代码微信 ...
魔众大转盘抽奖系统PHP源码
简介: 魔众大转盘抽奖系统是一个可快速私有化的大转盘系统,可以创建多个大转盘活动,奖品支持现金红包.积分.实物礼品.兑换码. 魔众大转盘抽奖系统发布v2.0.0版本,新功能和Bug修复累计27项,全面 ...
原生js写简易抽奖系统
效果图原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止如果i=ture 那就触发定时器每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果下面我给大家 ...
golang高并发微服务项目——大转盘抽奖系统
源码地址添加链接描述项目截图后台页面: 前台页面: 项目基本架构:
原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
h5php大转盘抽奖,html5的非常简单圆形转盘抽奖代码
html5的非常简单圆形转盘抽奖代码非常简单的html5 canvas实现的圆形转盘抽奖代码,无需jQuery就可以实现的抽奖转盘特效. var fillStyle = ['rgb(255,154, ...
python七夕快乐_python编写简单抽奖系统
python编写简单抽奖系统 #!/usr/bin/env python #coding=utf-8 from Tkinter import * import time import random c ...
canvas转盘抽奖的实现(二)
本篇是<canvas转盘抽奖的实现(一)>的另一种实现方法,主要通过css3的transform以及transition过渡来实现. 思路比较简单,事先规定好奖品待旋转的角度,然后通过 ...
cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...

H5-canvas-原生-编写俄罗斯转盘抽奖系统

H5-canvas-原生-编写俄罗斯转盘抽奖系统相关推荐

最新文章

热门文章