微信小程序利用canvas绘制幸运大转盘功能_canvas大转盘

小程序幸运大转盘

canvas

201 浏览量更新于2023-03-03 评论收藏 68KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序利用微信小程序利用canvas 绘制幸运大转盘功能绘制幸运大转盘功能

本文通过一段简单的实例代码给大家介绍微信小程序利用canvas 绘制幸运大转盘，代码很简单，感兴趣的朋友

跟随脚本之家小编一起看看吧

小程序对 canvas api 跟h5的不太一致，所以这个搞的比较久，不多说，先贴代码

Page({

/**

* 页面的初始数据

data: {

awardsConfig: {},

restaraunts: [], //大转盘奖品信息

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

var self = this;

wx.getSystemInfo({

//获取系统信息成功，将系统窗口的宽高赋给页面的宽高

success: function (res) {

self.width = res.windowWidth

self.height = res.windowHeight

}

})

self.data.awardsConfig = {

chance: true,

awards: self.data.restaraunts//存放奖项信息

}

self.tab();

})

tab: function() {

var self = this;

// 绘制转盘

var awardsConfig = self.data.awardsConfig.awards,

len = awardsConfig.length,

rotateDeg = 360 / len / 2 + 90,

html = [],

turnNum = 1 / len // 文字旋转 turn 值

self.setData({

btnDisabled: self.data.awardsConfig.chance ? '' : 'disabled'

})

var ctx = wx.createContext();

for (var i = 0; i < len; i++) {

var w = self.width; //页面宽

var r = w * 0.38; //圆半径 0.35w

// 保存当前状态

ctx.save();

// 开始一条新路径

ctx.beginPath();

// 位移到圆心，下面需要围绕圆心旋转

// ctx.translate(150, 150);

ctx.translate(w / 2 - 14, w / 2 - 18);

// 从(0, 0)坐标开始定义一条新的子路径

ctx.moveTo(0, 0);

// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。

ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);

// 绘制圆弧

ctx.arc(0, 0, r, 0, 2 * Math.PI / len, false);

// 颜色间隔

if (i % 2 == 0) {

ctx.setFillStyle('#ffffff');

} else {

ctx.setFillStyle('#ffeab0');

}

// 填充扇形

ctx.fill();

// 绘制边框

ctx.setLineWidth(0.5);

ctx.setStrokeStyle('#e4370e');

ctx.stroke();

// 恢复前一个状态

ctx.restore();

// 奖项列表

html.push({

turn: (i + 1) * turnNum + 'turn',

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38515362

粉丝: 3
资源: 946

会员权益专享

微信小程序利用canvas 绘制幸运大转盘功能

评论0

会员权益专享

最新资源

微信小程序利用canvas 绘制幸运大转盘功能

评论0

canvas实现转盘抽奖的绘制

笔记十快速建立基本界面 + Egret制作转盘效果

HTML5 Canvas 微信大转盘抽奖特效.rar

微信小程序使用canvas绘制一条线

微信小程序用canvas绘制二维码

canvas微信小程序

微信小程序关闭canvas

微信小程序怎么用canvas绘制笑脸

微信小程序 canvas2d 绘制海报

微信小程序中,绘制canvas需要注意的问题

微信小程序canvas

微信小程序canvas实现图片拼接

微信小程序画布 canvas 内容拖拽

微信小程序使用htmlcanvas

微信小程序 canvas

微信小程序使用canvas实现签名功能

微信小程序使用canvas后层级过高

微信小程序canvas字体倾斜

微信小程序用canvas画圆角矩形

微信小程序 html2canvas

会员权益专享

最新资源