canvas应用之抽奖demo

前言

往期文章

• canvas - 基础了解
• canvas进阶之图像处理基础知识

本文将讲解用canvas在抽奖环节的应用

幸运大转盘

代码地址

苹果机

素材

为什么转盘有两个几乎一样的图片呢

• 当canvas每帧draw时，交替图片，实现闪灯效果

方式一

• 比较简单的方式，就是在抽奖开始前，就已经知道抽奖的结果，这样，在程序运行时，就已明确最终停留的位置，可以借助 Tween.js 实现，运动轨迹的算法

• 代码地址

方式二

• 在未知抽奖结果时，就可以抽奖，让抽奖跑起来，然后强行告知程序抽奖结果，让程序自己慢慢停到相应的位置

• 代码地址