html如何画出抽奖的转盘,HTML5之CANVAS学习,实现抽奖转盘
实现个小例子来达到学习的目的,无疑是最好的。很看到网上有很多已经实现的转盘游戏,自己也试着写了一个,思路是:画一个圆盘,分成10份,设立10个奖项,中间有个指针,点抽奖后旋转指针。
代码如下:
1.画圆盘
//绘制转盘圆环
function createCircle(){
//圆环上的颜色
var color = ["#D14278","#953FAE","#586837","#C7C76F","#AF2729","#3A9C76","#CCA540","#5998FE","#52DB53","#FEB834"];
var startAngle = 0;//扇形的开始弧度
var endAngle = 0;//扇形的终止弧度
//画一个10等份扇形组成的圆形
for (var i = 0; i< 10; i++){
startAngle = Math.PI*(2/10)*i;//0到2PI是一个整圆
endAngle = Math.PI*(2/10)*(i+1);
//保存当前绘画状态,以便我们画完这副画以后restore()再恢复到这个状态,画另一副画。
ctx.save();
ctx.beginPath();
/*ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
x和y参数是圆心坐标,radius是半径,
startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),
anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)
*/
ctx.arc(centerX, centerY, 150, startAngle, endAngle, false);
ctx.lineWidth = 160.0;
ctx.strokeStyle = color[i];
ctx.stroke();//空心圆
ctx.restore();
}
}
2.绘制扇形上的字,即奖项
var info=["一等奖","特等奖","三等奖","四等奖","五等奖","安慰奖","谢谢参与","八等奖","九等奖","十等奖"];
function createCirText(){
ctx.font = "Bold 20px Arial"; // 设置字体
ctx.textAlign='start';//文本水平对齐方式
ctx.textBaseline='middle';//文本垂直方向,基线位置
ctx.fillStyle = "#000";// 设置填充颜色
var step = 2*Math.PI/10;//10分之1圆的弧度
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],125,0);
ctx.restore();
}
}
3.绘制转盘指针
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();
}
4.旋转操作
//点击按钮开始旋转
function doFly(){
myCanvas2.width = 800;
ctx2.translate(centerX,centerY);//平移到圆心
if(t){
return;
}
var step = 50 +Math.random()*10;
var angle = 0;//旋转的角度
t = setInterval(function(){
step *= 0.95;
if(step <= 0.1){
clearInterval(t);
t = null;
var pos = Math.floor(angle/36);//因为分成了10等分,旋转的角度除以36,可得到当前旋转的度数
alert(info[pos]);
}else{
ctx2.restore();
ctx2.save();
ctx2.rotate(angle * Math.PI/180);//很关键,要旋转到上一次的角度,才能清掉上一次的指针
ctx2.clearRect(-5,-5, 170, 18);//先清,起始点已经平移到圆心,即圆心坐标为(0,0)
angle+=step;
if(angle > 360){//如果旋转角度大于360度后,减去360
angle -=360;
}
ctx2.restore();
ctx2.save();
ctx2.rotate(angle * Math.PI/180);
initPoint();
}
},60);
}
效果图:
源码下载:http://download..net/download/bewhatyouare/8435871
html如何画出抽奖的转盘,HTML5之CANVAS学习,实现抽奖转盘相关推荐
- html 5抽奖特效,利用HTML5实现Canvas大转盘抽奖特效
特效描述:利用HTML5实现 Canvas 大转盘 抽奖特效.利用HTML5实现Canvas大转盘抽奖特效 代码结构 1. 引入JS 2. HTML代码 当前浏览器版本过低,请使用其他浏览器尝试 va ...
- html如何画出四个圆圈,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
- html5如何写出圆背景,利用HTML5实现Canvas虚幻圆点背景特效
特效描述:利用HTML5实现 Canvas 虚幻圆点 背景特效.利用HTML5实现Canvas虚幻圆点背景特效 代码结构 1. 引入JS 2. HTML代码 (function($){ var can ...
- 怎么用html代码画出饼状图,HTML5饼状图代码
HTML5饼状图代码 var data = [ { numb: 4.85, color: '#00ff00', text: 'IE6.0' }, { numb: 4.23, color: '#99ff ...
- 【画出漂亮的电路图】CircuiTikZ库学习第一天
一.预览 二.代码 \begin{circuitikz}[american voltages]\draw (0,0) to [vsource=$U_1$] (0,3);\draw (0,3) to [ ...
- html5 canvas 画阿迪达斯logo,canvas绘图画出了的美团LOGO
接下来是用HTML新标签canvas绘图画出了的美团LOGO. canvas练习 var canvas=document.getElementById('myfirstcanvas'); canvas ...
- 静物素描如何“鼓”起来,画出体积感?
静物素描怎么画?素描怎么画的鼓起来,并且画出体积感?很多小伙伴在学习美术素描的时候都会遇到各种问题今天美术加带大家了解下静物素描的画法: 首先,静物素描怎么才能画出体积感: 1. 理解形体,有形才有体 ...
- html如何画出抽奖的转盘,css 如何“画”一个抽奖转盘
主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局 一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...
- php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
最新文章
- 视觉研究的前世今生(上)王天珍(武汉理工大学)
- MYSQL数据库表大小计算,计算mysql数据库数据表的大小,不精确,只是大略的数据...
- 安装使用sublime 对比工具sublimerge
- GARFIELD@11-11-2004
- 做开源 18 年,他想把中国开源带向世界 | 人物志
- java基础 内部类详解
- 查看Linux配置的NTP,查看linux安装ntp服务器配置
- [Mac] Newifi mini路由器刷breed+Padavan固件
- chrome浏览器如何设置黑色背景
- 一级域名注册如何申请?需要注意哪些事项?
- 黑莓招聘 BlackBerry Developer Evangelist (based in China)
- java求美国数学家的年龄,第二届世界顶尖科学家论坛最年轻的参会者只有15岁
- leetcode|剑指offter|面试题3:数组中重复的数字
- mac关闭VPN之后,浏览器就不能够正常上网了(图解)
- shell编程入门(一天掌握shell编程)
- 网络知识点------SBC和BSC的定义
- 教学、会议、信息发布同屏直播满足流媒体录播、直播软件之 libEasyScreenLive通过D3D方式实现屏幕采集
- 嵌入式新闻早班车-第25期
- 收录查询,搜狗收录查询入口
- matlab做水流量问题,基于MATLAB的地下水流量与水位降深关系的一种优化计算方法...
热门文章
- 测量地球半径的古希腊方法
- NR PUSCH(七) 相干传输
- js 创建标签 追加标签
- mat 释放_Opencv - 释放内存将cv :: Mat引用计数器更改为零
- 教你实现windowsxp自动登录大法(转)
- 使用C# 实现串口拨号器的SIM卡通信[修正版]
- Arduino ESP32 SD卡读写实例
- can‘t find part type item<$OSR_SYMS>
- UVM TLM2.0简单介绍
- 计算机设备机房防静电标准,机房防静电地板设计标准是什么