html5 canvas 微信大转盘抽奖源码

用法介绍:

  本源码简单易用,引用的js文件很少,需要改动的也很少,基本上可以说是拿来即用。转盘上奖品名字由js自动生成,无需在去动用PS软件,只需设置源码中turnplate对象的restaraunts、colors、icons三个数组即可(三个数组长度一致)。    
var turnplate={
		restaraunts:["5元现金", "谢谢参与", "小礼品一份","20元现金", "50元话费", "88元购物券"],	//大转盘奖品名称
		colors:["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"],		//大转盘奖品区块对应图标ID
		icons:["","icon-sorry","","","icon-recharge",""],	//大转盘奖品区块对应背景颜色
		outsideRadius:192,			//大转盘外圆的半径
		textRadius:155,				//大转盘奖品位置距离圆心的距离
		insideRadius:68,			//大转盘内圆的半径
		startAngle:0,				//开始角度
		bRotate:false				//false:停止;ture:旋转
};

 

演示图片:

  • 款式一
    html5_canvas大转盘抽奖源码(款式一).png
  • 款式二
    html5_canvas大转盘抽奖源码(款式二).png

 

下载地址:

0 个评论

要回复文章请先登录注册