项目有个抽奖需求,此项目运用vux框架
页面绘图是用canvas画图
<div class="canvas-wrapper">
<canvas ref="canvas" id="canvas" width="320" height="320">抱歉!浏览器不支持。</canvas>
<div id="btn" @click.prevent="start"/> // 抽奖按钮
</div>
//绘图
methods:{
initCanvas(num = 8) {
const canvas = this.$refs.canvas
if (!canvas.getContext) {
alert('抱歉!浏览器不支持该游戏。')
return
}
// 获取绘图上下文
let ctx = canvas.getContext('2d')
const img = new Image()
img.src = '../static/2.jpg'
img.onload = function () {
ctx.drawImage(img, 0, 0, 320, 320)
}
}
// 调用
mounted() {
this.initCanvas()
}
// 抽奖事件
methods:{
start() {
let deg = Math.floor(Math.random() * 4) * 2 * 360 / 8 //随机度数
deg += 360 / 8
if (this.ONCE++ === 0) { // 用户只能参加一次
this.$refs.canvas.style.transform = `rotate(${1800 + deg}deg)`
}
}
beforeCreate() {
this.ONCE = 0
}