HTML5 Canvas绘制转盘抽奖
提示，以下是实现思路，文章未尾有完整项目仓库。
下面简单介绍了HTML5 Canvas的来历、浏览器兼容性，主要内容是如何实现转盘抽奖，最后的DEMO非常简陋，真实场景还会有很多需要考虑和改进的地方(比如：
浏览器前缀)，这里只讲一步步实现的思路。
Demo
HTML5 Canvas
Canvas元素最早是Apple在Safari1.3中引入的，后在HTML5中标准化。
浏览器支持
兼容旧版IE可使用:
1 . ExplorerCanvas Github, Google Code
Google工程师使用VML(Vector markup Language)技术模拟Canvas，不支持一些高级功能，如：渐变、阴影、剪切区域等。
2 . FlashCanvas
依赖Flash插件，增加了更多功能支持，有Free、Pro版。
ExploreCanvas、FlashCanvas Free、FlashCanvas Pro功能支持对比：
http://flashcanvas.net/docs/canvas-api
Canvas API
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
抽奖转盘
1. 绘制扇形
HTML
<canvas id="canvas" width="300" height="300">抱歉！浏览器不支持。</canvas>
JS
var num = 6; // 奖品数量
var canvas = document.getElementById('canvas');
var btn = document.getElementById('btn');
if(!canvas.getContext){
alert('抱歉！浏览器不支持。');
return;
}
// 获取绘图上下文
var ctx = canvas.getContext('2d');
for (var i = 1; i <= num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate(360 / num * i * Math.PI/180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / num, false);
if (i % 2 == 0) {
ctx.fillStyle = '#ffb820';
}else{
ctx.fillStyle = '#ffcb3f';
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#f48d24';
ctx.stroke();
// 恢复前一个状态
ctx.restore();
}
调用绘图上下文的save()方法可以保存坐标系当前的状态。然后，再调用restore()方法可以返回保存过的前一个状态。如果要保存坐标系的状态，必须在应用任何变换之前调用save()，这样再调用restore()才能把坐标系恢复到正常状态。而在多步操作绘制复杂图形时，往往都需要多次保存坐标系状态。这些状态就如同浏览器中的历史记录一样。每次调用restore()，坐标系就会恢复到前一个最近的状态。
参考：
rotate: http://www.w3school.com.cn/tags/canvas_rotate.asp
arc: https://developer.mozilla.org/zh-CN/docs/Web/API/ CanvasRenderingContext2D/arc
http://www.w3school.com.cn/tags/canvas_arc.asp
2. 动画
CSS
#canvas{
border: 1px solid #000;
-webkit-transition: all 6s ease;
transition: all 6s ease;
}
canvas.style.transform = 'rotate(1800deg)';
3. 优化
未获取中奖数据前预旋转，增强用户体验
CSS
/* 1. 点击抽奖，动画匀速执行linear */
#canvas{
border: 1px solid #000;
-webkit-transition: all 6s linear;
transition: all 6s linear;
}
/* 2. 获取中奖数据，动画匀速执行并慢慢结束ease-out */
#canvas{
border: 1px solid #000;
-webkit-transition: all 6s ease-out;
transition: all 6s ease-out;
}
参考：
贝塞尔曲线
工具
FabricJS
一个简单而强大的 JavaScript Canvas 库。
http://fabricjs.com
TwoJS
Two.js 是面向现代 Web 浏览器的一个2D绘图 API。
http://jonobr1.github.io/two.js/
其它实现方式
CSS实现大转盘
http://sbdccc.wx.bad.uctoo.com/?_a=reward&_u=index.christmas&r_uid=39
完整代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Drawing sector</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
#turntable{
position: relative;
}
#canvas{
border: 1px solid #000;
-webkit-transform: all 6s ease;
transition: all 6s ease;
}
#btn{
position: absolute;
left: 120px;
top: 120px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
line-height: 60px;
text-align: center;
}
#btn:after{
position: absolute;
display: block;
content: '';
left: 10px;
top: -32px;
width: 0;
height: 0;
overflow: hidden;
border-width: 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<div id="turntable">
<canvas id="canvas" width="300" height="300">抱歉！浏览器不支持。</canvas>
<a id="btn" href="javascript:;">抽奖</a>
</div>
<script>
window.addEventListener('load', function(){
var num = 6; // 奖品数量
if (num % 2 !== 0){
alert('请配置偶数奖项');
}
var canvas = document.getElementById('canvas');
var btn = document.getElementById('btn');
if(!canvas.getContext){
alert('抱歉！浏览器不支持。');
return;
}
// 获取绘图上下文
var ctx = canvas.getContext('2d');
for (var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI/180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / num, false);
if (i % 2 == 0) {
ctx.fillStyle = '#ffb820';
}else{
ctx.fillStyle = '#ffcb3f';
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#f48d24';
ctx.stroke();
// 文字
ctx.fillStyle = '#fff';
ctx.font="16px sans-serif";
ctx.fillText(i + 1, 100, 60);
// 恢复前一个状态
ctx.restore();
}
// 抽奖
btn.onclick = function(){
canvas.style.transform = 'rotate(1800deg)';
}
}, false);
</script>
</body>
</html>
新项目：完整的Canvas转盘抽奖代码
https://github.com/givebest/GB-canvas-turntable
演示
http://blog.givebest.cn/GB-canvas-turntable.html
转载请注明出处：http://www.cnblogs.com/givebest/p/5296335.html
HTML5 Canvas绘制转盘抽奖的更多相关文章
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
随机推荐
- mysql 写入优化
1 主从分离 从表读取,主表可以去掉索引 2 先写入到文件或redis,定时刷新到库 3 用nginx 4 分库 分表 每个库表的数据总量少了 插入会快一点 5 最大限度减少查库的次数 6 一条sql ...
- [PHP源码阅读]empty和isset函数
近日被问到PHP中empty和isset函数时怎么判断变量的,刚开始我是一脸懵逼的,因为我自己也只是一知半解,为了弄懂其真正的原理,赶紧翻开源码研究研究.经过分析可发现两个函数调用的都是同一个函数,因 ...
- myeclipse学习总结二（myeclipse安装svn插件）
1.在myeclipse中要安装svn插件,首先是下载svn插件. 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?fold ...
- Android开发学习之路-Git的极简教程？
Git是一个代码版本管理工具,也就是允许我们的一个项目拥有多个版本,这样我们可以随心所欲的修改我们的代码,如果出现问题,可以回退到某一个提交点.如果你还在用一堆堆注释来更新你的代码,那么可以尝试一下G ...
- Lisp和SICP
大概不少programmer都看过<黑客与画家>,作者用了整整一章的篇幅讨论Lisp的强大.我自然就会手痒痒. 几个月前,几天内攻城略地搞定了Python,用的方法便是 ...
- ubuntu 14.04LTS 环境下搭建tftp服务器
花费我一整天的时间在 ubuntu 14.04LTS 环境下搭建tftp服务器,网上好多资料参差不齐,简单来说,TFTP(Trivial File Transfer Protocol),是一个基于UD ...
- WebSocket与消息推送
B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不需要与客户端长时间建立一个通信链 ...
- Vertica 高可用性测试
1.基本概念介绍 2.停止某节点服务 3.测试其他节点访问 1.基本概念介绍 Vertica也是MPP架构的数据库,相比大家熟悉的MPP架构,比如Greenplum和hadoop这些产品,Vertic ...
- 分布式系统理论进阶 - Paxos变种和优化
引言 <分布式系统理论进阶 - Paxos>中我们了解了Basic Paxos.Multi Paxos的基本原理,但如果想把Paxos应用于工程实践,了解基本原理还不够. 有很多基于Pax ...
- windows环境tomcat8配置Solr5.5.1
前言 前前后后接触Solr有一个多月了,想趁着学习Solr顺便把java拾起来.我分别用4.X和5.X版本在windows环境下用jetty的方式.tomcat部署的方式自己搭建了一把.其中从4.x到 ...