中奖记录html页面,HTML5 canvas实现中奖转盘的实例代码

本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在学canvas做动画，于是就写个转盘练下手。

上个简陋的成果图(中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈)

代码很简单，都注释了，直接上代码吧，嘤嘤嘤

html

您的浏览器不支持canvas

css

#canvas{

position: absolute;

left: 230px;

top: 230px;

}

#img{

width: 600px;

height: 600px;

}

jsvar canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

//设定画布和宽

canvas.width=140;

canvas.height=140;

var then = Date.now();

var now;//利用时间差来控制转盘最小转动时间

var first_deg=0;//用来记录转动的角度

var rotate_deg=0;//每次转动的角度，用来实现变速运动

var end_deg =85;//中奖角度

var speedUp = true;//判断是否在加速阶段

var f;

// 因为canvas的rotate函数是根据左上角坐标(0,0)来旋转的，所以移动画布

context.translate(70,70);

function draw(){

context.clearRect(-70, -70, 70, 70);

context.beginPath();

context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);

context.moveTo(-50,0);

context.lineTo(50,0);

context.lineTo(0,-70);

context.rotate(rotate_deg*Math.PI/180);

context.closePath();

context.fillStyle='red';

context.fill();

}

// 将运动分为3段，加速，匀速，减速

function loop(){

//循环调用，产生动画效果

f = window.requestAnimationFrame(loop);

now = Date.now();

//开始加速转动，转到速度为20就不加速了，至于为什么是20，看起来舒服而已

if(rotate_deg<=20&&speedUp){

rotate_deg =1;

};

//2s后开始减速(即最小转动时间)，减速是为了视觉上的美观

if(now - then > 2000){

//如果下面设置的是固定角度，那这里的最小速度建议为1，因为每次转动角度过大，一圈很可能错过中奖的角度，导致转很多圈。

if(rotate_deg>=2){

speedUp = false;

rotate_deg -=1;

}

//设置中奖区间为 -5度(设置固定角度会让动画有点难看)

if(first_deg60>=end_deg-5&&first_deg60<=end_deg 5){

window.cancelAnimationFrame(f);//停止循环

//中奖操作

}

};

first_deg = rotate_deg;//记录转过的角度

draw();//绘制图形

}

loop();

最后

现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。

相关文章推荐：

html5 canvas用来绘制弧形的代码实现

HTML5实现魔方游戏的代码

HTML5结合互联网 实现的3D隧道(附代码)