完整~小程序canvas制作幸运抽奖转盘

最新推荐文章于 2024-08-09 08:29:57 发布

改不了坏习惯的夜猫子

最新推荐文章于 2024-08-09 08:29:57 发布

阅读量8.4k

点赞数 5

分类专栏：小程序之转盘文章标签：小程序转盘 canvas 动态获取抽奖

本文链接：https://blog.csdn.net/weixin_43464837/article/details/83182122

版权

本文介绍了如何在小程序中利用canvas技术制作一个完整的幸运抽奖转盘。内容包括遇到的问题及解决办法，展示转盘效果，并指出在实际操作中将canvas转换为图片以适应真机显示。特别地，代码确保指针总是停在二等奖区域。

摘要由CSDN通过智能技术生成

小程序转盘完整版

最近在做一款小程序幸运转盘抽奖，遇到了不少坑，分享一下
先看下效果图
数据都可以加载过来，此处数据为固定一个例子
wxml里面比较简单，但是canvas在真机上面显示会有问题，只需要生成你想要的canvas后转化为图片

<view class="turn-table">
		<image class="bg-turntable" src='{
  {turntableImage}}'  mode="widthFix"></image>
	  	<view>
	  		<view class='canvas-container'>
	  			<canvas style="position:fixed;left: -10000rpx;" disable-scroll="true" canvas-id='canvas' id="canvas-bg" class='canvas '></canvas>
	  			<image src='{
  {tempFilePath}}' style="-webkit-transform:rotate({
  {isRotate}}deg);transform:rotate({
  {isRotate}}deg);display: block;"  class='canvasI-image'></image>
	  		</view>
	  	</view>
	  	<view class="center-bg">
	  	 	<image class='start' src="../../../images/turntable/start.png" catchtap='{
  {trunBtn?"getStart":""}}'  mode="widthFix" />
	  	</view>
	</view>

wxss

.contaner{
  width: 100%;
  padding-bottom: 28rpx;
}
.bg-image{
  position: absolute;
  top: 0rpx;
  width: 100%;
}
.turn-table{
  margin: 0 auto;
  min-height: 574rpx;
  height: auto;
  margin-top: 442rpx;
  margin-bottom: 13rpx;
  position: relative;
}
.canvas{
  width: 600rpx;
  height: 600rpx;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto auto;
 
  -webkit-transition:all 3s