更多课程 选择中心


Web培训

400-111-8989

Web培训

用HTML5 canvas写抽奖轮盘特效的方法

  • 发布:佚名
  • 来源:网络
  • 时间:2016-01-15 17:19

基于HTML5 canvas的简单抽奖轮盘是一款非常简单的基于HTML5 canvas的抽奖轮盘特效。该抽奖轮盘中的所有元素都使用canvas代码来生成,可以设置轮盘的旋转速度和衰减速度来控制轮盘的转动效果。

抽奖轮盘

使用方法

HTML结构

该抽奖轮盘的HTML结构使用一个<canvas> 元素和一个用于触发抽奖事件的按钮组成。

<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="btn">开始抽奖</button>    

JavaScript

在js代码中,通过一个数组变量来设置有多少个奖项,beginAngle变量是旋转起来时默认开始旋转的度数,度数愈大旋转的初始速度愈大。radio参数是旋转速度衰减系数,它影响旋转时间。outerR参数是轮盘的大小,interR是轮盘内圆的大小。step参数是轮盘转动的步长。

var info=["一等奖","二等奖","三等奖","四等奖","五等奖","六等奖","七等奖","八等奖","九等奖","十等奖"];
var color=[];
var step = 2*Math.PI/10;
var outerR = 150; //轮盘的大小
var interR = 50;//内存空白圆的大小
var beginAngle=50;//旋转起来时默认开始旋转的度数,度数愈大旋转的初始速度愈大
var radio = 0.95;//旋转速度衰减系数,影响旋转时间                

接着在页面加载完毕之后,首先通过init()函数和createArrow()函数来初始化抽奖轮盘。然后监听按钮的鼠标点击事件,当用户点击了抽奖按钮之后,通过一个定时器来不断的绘制和刷新抽奖轮盘。

window.onload=function() {
    for ( var i = 0; i < 10; i++) {
       color.push(getColor());
    }
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.translate(250,250);
    createArrow(context);
    init(context);
    document.getElementById("btn").onclick=function(){
       if(t){
          return false;
       }
       var step = beginAngle +Math.random()*10;
       var angle = 0;
       t = setInterval(function(){
          step *=radio;
          if(step <= 0.1){
           clearInterval(t);
           t =null;
           var pos = Math.ceil(angle / 36);
           var res = info[10-pos];
           context.save();
           context.beginPath();
           context.font="23px 微软雅黑";
           context.fillStyle="#f00";
           context.textAlign="center";
           context.textBaseline="middle";
           context.fillText(res,0,0);
           context.restore();
          }else{
           context.clearRect(-250,-250,500,500);
           angle+=step;
           if(angle > 360){
              angle -=360;
           }
           context.save();
           context.beginPath();
           context.rotate(angle * Math.PI/180);
           init(context);
           context.restore();
           createArrow(context);
          }
       },60);
    };
};    

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:基于HTML5鼠标点击淡入淡出切换代码
下一篇:HTML5的这些API你知道吗?

HTML5对APP开发终端用户的优势

前端开发必学的10个HTML5动画工具

用HTML5 canvas写抽奖轮盘特效的方法

HTML5电子书翻页动画

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省