canvas + JavaScript实现幸运大转盘

最新推荐文章于 2023-09-01 09:00:00 发布
最新推荐文章于 2023-09-01 09:00:00 发布
阅读量1.4k 收藏 7
点赞数 1
文章标签： HTML5 Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41607607/article/details/83317492
版权

在这里插入图片描述
HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/mr-style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/mr-js.js"></script>
</head> 

<body>
<div class="mr-can">
	<div style="width: 800px;height: 550px;margin: auto;">
		<canvas id="canvas1" width="800px" height="500px" style="position: absolute;">您的浏览器不支持canvas标签！</canvas>
		<canvas id="canvas2" width="800px" height="500px" style="position: absolute;">您的浏览器不支持canvas标签！</canvas>
	</div>
	<input type="button" id="flyBtn" value="转起" onclick="doFly()" />
</div>
</body>

</html>

CSS代码：

`@charset "utf-8";
/* CSS Document */
.mr-can{
	width:800px;
	height:590px;
	margin:auto;
	border:1px solid #f00;
	}
#flyBtn{
	width:60px;
	height:40px;
	margin-left:370px;
	background-color:#F00;
	font-size:24px;
	color:#FFF;
	}

JS代码：

"use strict";
// JavaScript Document
var t = null;
var centerX = 400;
var centerY = 250;
var ctx = null;	//定义绘制转盘的画布
var ctx2 = null; //定义绘制转盘指针的画布
//定义指针位置的横坐标。因为会多次应用这个数字，为便于修改，在此定义变量
var lineLen = 150;
var myCanvas2 = null;
//创建画图对象
window.onload = function()
{	var myCanvas = document.getElementById("canvas1");
	ctx = myCanvas.getContext("2d");
	var myCanvas2 = document.getElementById("canvas2");
	ctx2 = myCanvas2.getContext("2d");
	createCircle2(); //绘制中间层转盘圆环
	createCircle1(); //绘制最内层转盘圆环 
	createCircle() ; //绘制最外层转盘圆环
	createCirText(); //绘制转盘上的字
	createpics();    //绘制转盘上的图片
	ctx2.translate(centerX,centerY);
	initPoint();     //绘制转盘指针
};
function createCircle2()
{
	var color = ["rgba(209,66,120,0.6)","rgba(149,63,174,0.6)","rgba(88,104,55,0.6)",
				 "rgba(199,199,111,0.6)","rgba(175,39,41,0.6)","rgba(58,156,118,0.6)",
				 "rgba(204,165,64,0.6)","rgba(89,152,254,0.6)","rgba(82,219,83,0.6)","rgba(254,184,52,0.6)"]; //圆环上的颜色
	var startAngle = 0; //定义起始弧度变量
	var endAngle = 0;   //定义终止弧度变量
		for(var i=0; i<10; i++)
			{
				//画一个由十等份扇形组成的空心圆形
				ctx.save();  //保存当前绘画状态，以便画完这幅画，再恢复到这个状态，画另一幅画
				ctx.beginPath(); //开始绘制
				startAngle = Math.PI*(2/10)*i; //起始弧度
				endAngle = Math.PI*(2/10)*(i+1); //终止弧度
		//逐个绘制扇形，半径为155
				ctx.arc(centerX,centerY,155,startAngle,endAngle,false);
				ctx.lineWidth = 180.0; //定义线宽
				ctx.strokeStyle = color[i]; //给扇形的边框添加颜色样式
				ctx.stroke();       //绘制空心圆
				ctx.restore();      //回复之前保存的状态
			}
}
function createCircle1()
{
	var color = ["rgba(209,66,120,0.6)","rgba(149,63,174,0.6)","rgba(88,104,55,0.6)",
				 "rgba(199,199,111,0.6)","rgba(175,39,41,0.6)","rgba(58,156,118,0.6)",
				 "rgba(204,165,64,0.6)","rgba(89,152,254,0.6)","rgba(82,219,83,0.6)","rgba(254,184,52,0.6)"]; //圆环上的颜色
	var startAngle = 0; //定义起始弧度变量
	var endAngle = 0;   //定义终止弧度变量
		for(var i=0; i<10; i++)
			{
				//画一个由十等份扇形组成的空心圆形
				ctx.save();  //保存当前绘画状态，以便画完这幅画，再恢复到这个状态，画另一幅画
				ctx.beginPath(); //开始绘制
				startAngle = Math.PI*(2/10)*i; //起始弧度
				endAngle = Math.PI*(2/10)*(i+1); //终止弧度
		//逐个绘制扇形，半径为155
				ctx.arc(centerX,centerY,150,startAngle,endAngle,false);
				ctx.lineWidth = 160.0 ; //定义线宽
				ctx.strokeStyle = color[i]; //给扇形的边框添加颜色样式
				ctx.stroke();       //绘制空心圆
				ctx.restore();      //回复之前保存的状态
			}
}
function createCircle()
{
	var color = ["rgba(209,66,120,0.6)","rgba(149,63,174,0.6)","rgba(88,104,55,0.6)",
				 "rgba(199,199,111,0.6)","rgba(175,39,41,0.6)","rgba(58,156,118,0.6)",
				 "rgba(204,165,64,0.6)","rgba(89,152,254,0.6)","rgba(82,219,83,0.6)","rgba(254,184,52,0.6)"]; //圆环上的颜色
	var startAngle = 0; //定义起始弧度变量
	var endAngle = 0;   //定义终止弧度变量
		for(var i=0; i<10; i++)
			{
				//画一个由十等份扇形组成的空心圆形
				ctx.save();  //保存当前绘画状态，以便画完这幅画，再恢复到这个状态，画另一幅画
				ctx.beginPath(); //开始绘制
				startAngle = Math.PI*(2/10)*i; //起始弧度
				endAngle = Math.PI*(2/10)*(i+1); //终止弧度
		//逐个绘制扇形，半径为155
				ctx.arc(centerX,centerY,55,startAngle,endAngle,false);
				ctx.lineWidth = 150.0 ; //定义线宽
				ctx.strokeStyle = color[i]; //给扇形的边框添加颜色样式
				ctx.stroke();       //绘制空心圆
				ctx.restore();      //回复之前保存的状态
			}
}
function createpics()
{
	var images = new Image();  //绘制圆心处的背景图片
	images.src = "img/choujia.png";  //引用背景路径
	images.onload = function()
	{//当图片被加载时。绘制图片
		ctx.drawImage(images,centerX-75,centerY-75,150,150);
		ctx.restore();
	};
}
function createCirText()
{       var info=["一等奖电脑","谢谢参与","谢谢参与","二等奖手机","谢谢参与",
			  "谢谢参与","三等奖耳机","谢谢参与","谢谢参与","谢谢参与"]; //定义数组逐个保存转盘上的文字
		ctx.font = "Bold 20px Arial";     //设置字体
		ctx.textAlign = 'start';          //文本水平对齐方式
 		ctx.textBaseline = 'middle';
		ctx.fillStyle = "#000";			  //文本垂直方向，基线位置
		var step = 2*Math.PI/10; 		  // 1/10圆的弧度
		for(var i=0; i<10;i++)
			{
				ctx.save();
				ctx.beginPath();
				ctx.translate(centerX,centerY);  //平移到圆心
				ctx.rotate(i*step+step/2);       //从时钟15点处开始旋转弧度i*step+step/2
				ctx.fillText(info[i],130,0);
				ctx.restore();
			}
}
function initPoint()
{
	//直线加箭头
	ctx2.beginPath(); 
	ctx2.moveTo(0,2);
	ctx2.lineTo(lineLen,2);
	ctx2.lineTo(lineLen,4);
	ctx2.lineTo(lineLen+10,0);  //箭头的长度
	ctx2.lineTo(lineLen,-4);
	ctx2.lineTo(lineLen,-2);
	ctx2.lineTo(0,-2);
	ctx2.fillStyle = "#C01020" ;
	ctx2.fill();
	ctx2.closePath();
}
function doFly()
{   myCanvas2.width=800;
	ctx2.translate(centerX,centerY);    //移动坐标到画布中心
	if(t)
	{
		return;
	}
	var step = 50 +Math.random()*10;  //生成50~60的随机数
	var angle = 0;  //旋转的角度
	t = setInterval(function()
	{
		step *= 0.95;
		if(step <=0.1)
		    {
				clearInterval(t);
				t = null;
		    }
		else
			{
				ctx2.restore();
				ctx2.save();
				ctx2.rotate(angle * Math.PI/180);
				ctx2.clearRect(-5,-5,170,18);
				angle+=step;
				if(angle > 360)
					{
						angle -=360;
					}
				ctx2.restore();
				ctx2.save();
				ctx2.rotate(angle*Math.PI/180);
				initPoint();  //调用指针
			}
	},60);  //设定旋转的时间
}

若有其他问题，望大神指教！

SINYARD
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于HTML5 小游戏 幸运大转盘
03-19
基于HTML5实现的小游戏，幸运大转盘。可以直接运行。初始初学者。
设置canvas画布大小
qq_17627195的博客
01-12 1万+
canvas的绘制是以画布大小为准的。 canvas的默认画布大小为300×150。 设置canvas画布大小的方法： // 方法一 <canvas id="test" width="100px" height="100px"></canvas> //方法二：通过js实现 <canvas id="test"></canvas> <script> var canvas = document.getElementById('test'); can
HTML5 简单的转盘抽奖js特效代码
ICode联盟
12-04 3040
下载地址 var info=["一等奖","二等奖","三等奖","四等奖","五等奖","六等奖","七等奖","八等奖","九等奖","十等奖"];var color=[];var step = 2*Math.PI/10;var outerR = 150; //轮盘的大小var interR = 50;//内存空白圆的大小var beginAngle=50;//旋转起来时默认开始旋转的度数，度数愈大旋转的初始速度愈大var radio = 0.95;//旋转速度衰减系数，影响旋转时间var t = n
Canvas设置width和height问题
liuyuemozhu的博客
09-06 3201
canvas中设置宽高有canvas标签设置和css样式设置，那么这两种设置的区别是什么？
写了一个好玩的js图片转盘。。。
用心做事，用情做人
03-27 253
给老婆她姐婚礼送了一个礼物，一个自己做的结婚祝福网站， 自己写了一个图片的圆盘，还比较有意思。 [code="javascript"] var curImg; function imgRound(){ //圆的半径 var r=240; //圆心坐标 var x=window.screen.width-30; var y=26...
基于JavaScript的幸运大转盘
04-06
基于JavaScript的幸运大转盘
javascript+HTML5 Canvas绘制转盘抽奖
10-22
主要介绍了javascrip+HTML5 Canvas绘制转盘抽奖的相关资料,需要的朋友可以参考下
canvas+svg实现标尺网格效果
04-11
使用js+canvas绘图，结合svg图形，实现标尺栏和网格效果。
使用JavaScript+canvas实现图片裁剪
12-11
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码： 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) {  var c
canvas实现转盘抽奖的绘制
10-22
采用canvas的绘制转盘图像，设置转速，以及可以更改奖项设置，
大转盘抽奖jqurey版，ajax可连接自己的开发语言，源码只提供htm5前端代码
01-30
点击转盘进行抽奖，每人每天可以抽奖一次，分享还可以再获得一次抽奖机会，抽中的奖品券可以进行核销兑换，同时页面带轮播中间记录，所有前台效果都有显示，中间后弹出遮罩，效果美观，适合html5互动和微信公众号开发。
html+js实现大转盘例子
11-14
html+css+js实现大转盘例子,可单独运行，实现抽奖领券功能
JS实现抽奖转盘
热门推荐
方糖的博客
10-26 2万+
超级简单的原理： 点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度，然后调用 jqueryRotate.js插件来转动轮盘，并停在奖品的对应角度。 使用的插件 jquery.js jqueryRotate.js //旋转插件 实现的效果 实现代码 HTML &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&
canvas绘制转盘/扇形 rotate
宏斌的博客
12-03 1240
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
canvas绘制大转盘
风舞红枫的个人博客
05-23 1661
canvas绘制大转盘
【lucky-canvas插件】在Vue3实现大转盘&九宫格&老虎机抽奖
最新发布
有事儿私信。
09-01 4523
平时做项目时常会遇到抽奖需求。如果一个一个原生手敲的话，很费时间。所以找到了一款抽奖插件——lucky-canvas，一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。可以满足绝大部分的项目需求。（定制化高的话仍需原生手写）。本文将介绍该插件的使用方法，并以vue3项目举例。
幸运大转盘抽奖（前端uniapp）
青春，待续的代名词。
06-25 4236
幸运大转盘抽奖(前端) 无依赖, 简单易用(复制粘贴就能用) 效果图如下
html5 制作幸运大转盘
小菜鸟的博客
06-11 1万+
代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 购买大厅 幸运大转盘 返回 游戏规则：每次转动消费10积分,中奖后系统记录,客服会与您第一时间取得联系！ 当前积分1000 var colors = ["#B8D4
html+css+js实现带有转盘的抽奖小程序
05-16
好的，下面是一个基于HTML、CSS、JS实现带有转盘的抽奖小程序的示例代码。 首先，我们需要在HTML中创建一个canvas元素，作为转盘的容器。 ```html <canvas id="canvas" width="400" height="400"></canvas> ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值