提示，以下是实现思路，文章未尾有完整项目仓库。

下面简单介绍了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绘制转盘抽奖的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. SQLite学习笔记(十)&&加密

    随着移动互联网的发展,手机使用越来越广泛,sqlite作为手机端存储的一种解决方案,使用也非常普遍.但是sqlite本身安全特性却比较弱,比如不支持用户权限,只要能获取到数据库文件就能进行访问:另外也 ...

  2. 解决Ubuntu Kylin 1610安装ANSYS17.2的NVIDIA显卡驱动问题

    Ubuntu Kylin 1610在安装完毕后,会自动安装显卡驱动,对于一般的图形图像使用来说自然不会有太大的问题,但是对于ANSYS17.2的一些模块,还是会出现问题.一个比较常见的问题就是Open ...

  3. 微软“.Net社区虚拟大会”dotnetConf2015：关键词：.NET 创新、开源、跨平台

    去年 11 月的时候,微软开源了 .NET CoreFX,然后是今年 2 月份的 .NET CoreCLR.自那时以来,已经有大约 3500 人在 GitHub 上进行了提交,而且贡献者的人数还在持续 ...

  4. 关于我 — About Me

    个人简介 姓名:周旭龙 关注:.NET开发技术.Web前端技术 邮箱:edisonchou@hotmail.com GitHub: https://github.com/edisonchou 主要经历 ...

  5. ASP.NET Web API Model-ParameterBinding

    ASP.NET Web API Model-ParameterBinding 前言 通过上个篇幅的学习了解Model绑定的基础知识,然而在ASP.NET Web API中Model绑定功能模块并不是被 ...

  6. redis的面试题

    1:使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,lis ...

  7. Css中的两个重要概念：块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  8. 牛逼的css3:动态过渡与图形变换

    写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...

  9. MVC5 网站开发之七 用户功能 3用户资料的修改和删除

    这次主要实现管理后台界面用户资料的修改和删除,修改用户资料和角色是经常用到的功能,但删除用户的情况比较少,为了功能的完整性还是坐上了.主要用到两个action "Modify"和& ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出

    系列目录 昨天文章太过仓促没有补充导出的示例源码,在者当时弄到到很晚没时间做出导出功能,对阅读理解造成影响,现补充一份示例源码,顺便补充导出的功能说明,望理解 示例代码下载   https://yun ...