文档介绍：HTML5 Canvas绘制转盘抽奖
下面简单介绍了HTML5 Canvas的来历、浏览器兼容性,主要内容是如何实现转盘抽奖,最后的DEMO非常简陋,真实场景还会有很多需要考虑和改进的地方(比如:浏览器前缀),这里只讲一步步实现的思路。
HTML5 Canvas
,后在HTML5中标准化。
浏览器支持
查看详细浏览器支持
兼容旧版IE可使用:
1 . ExplorerCanvas Github, Google Code
Google工程师使用VML(Vector markup Language)技术模拟Canvas,不支持一些高级功能,如:渐变、阴影、剪切区域等。
2 . FlashCanvas
依赖Flash插件,增加了更多功能支持,有Free、Pro版。
ExploreCanvas、FlashCanvas Free、FlashCanvas Pro功能支持对比:
/docs/canvas-api
Canvas API
https://developer.//docs/Web/API/Canvas_API
抽奖转盘
1. 绘制扇形
HTML
<canvas id="canvas" width="300" height="300">抱歉!浏览器不支持。</canvas>
JS
var num = 6; // 奖品数量
var canvas = ('canvas');
var btn = ('btn');
if(!){
alert('抱歉!浏览器不支持。');
return;
}
// 获取绘图上下文
var ctx = ('2d');
for (var i = 1; i <= num; i++) {
// 保存当前状态
();
// 开始一条新路径
();
// 位移到圆心,下面需要围绕圆心旋转
(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * 公式进行计算。
(360 / num * i * );
// 绘制圆弧
(0, 0, 150, 0, 2 * / num, false);
if (i % 2 == 0) {
= '#ffb820';
}else{
= '#ffcb3f';
}
// 填充扇形
();
// 绘制边框
= ;
= '#f48d24';
();
// 恢复前一个状态
();
}
调用绘图上下文的s