js抽奖转盘实现方法分析

本文实例讲述了js抽奖转盘实现方法。分享给大家供大家参考，具体如下：

 HTML  这里.left 固定了圆的宽度和高度，还有canvas也设置了固定宽高 绘制圆心的坐标也就出来了 (203,203)

抽奖转盘是由一个大圆和一个内圆完成 ；大圆负责绘制上奖品 ，内圆负责确定指针的位置，指针直接使用图片，决定位置确定

外圆留空多少的问题

PS里查看间距是多少，此处圆心(203,203) 大圆的半径就是203-10 =193

这个数值在下图里设置

JS

引用jquery

在加载以下JS

(function($) {
var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a=0;a this._parameters.duration;

     // TODO: Bug for animatedGif for static rotation ? (to test)
     if (checkEnd && !this._parameters.animatedGif) 
     {
clearTimeout(this._timer);
     }
     else 
     {
if (this._canvas||this._vimage||this._img) {
  var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
  this._rotate((~~(angle*10))/10);
}
if (this._parameters.step) {
 this._parameters.step(this._angle);
}
var self = this;
this._timer = setTimeout(function()
    {
    self._animate.call(self);
    }, 10);
     }

     // To fix Bug that prevents using recursive function in callback I moved this function to back
     if (this._parameters.callback && checkEnd){
this._angle = this._parameters.animateTo;
this._rotate(this._angle);
this._parameters.callback.call(this._rootObj);
     }
   },

	_rotate : (function()
	{
		var rad = Math.PI/180;
		if (IE)
		return function(angle)
		{
      this._angle = angle;
			this._container.style.rotation=(angle%360)+"deg";
		}
		else if (supportedCSS)
		return function(angle){
      this._angle = angle;
			this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
		}
		else 
		return function(angle)
		{
      this._angle = angle;
			angle=(angle%360)* rad;
			// clear canvas	
			this._canvas.width = this._width+this._widthAdd;
			this._canvas.height = this._height+this._heightAdd;
						
			// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
			this._cnv.translate(this._widthAddHalf,this._heightAddHalf);	// at least center image on screen
			this._cnv.translate(this._widthHalf,this._heightHalf);			// we move image back to its orginal 
			this._cnv.rotate(angle);										// rotate image
			this._cnv.translate(-this._widthHalf,-this._heightHalf);		// move image to its center, so we can rotate around its center
			this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
			this._cnv.drawImage(this._img, 0, 0);							// First - we draw image
		}

	})()
}

if (IE)
{
Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
		try {
			!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
			return function (tagName) {
				return document.createElement('');
			};
		} catch (e) {
			return function (tagName) {
				return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
			};
		}
})();
}
})(jQuery);

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript数学运算用法总结》、《Javascript数据结构与算法技巧总结》、《Javascript数组操作技巧总结》、《Javascript排序算法总结》、《Javascript遍历算法与技巧总结》、《Javascript查找算法技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。