var turnplate={
    restaraunts:[],       //大转盘奖品名称
    colors:[],          //大转盘奖品区块对应背景颜色
    outsideRadius:192,      //大转盘外圆的半径
    textRadius:155,       //大转盘奖品位置距离圆心的距离
    insideRadius:68,      //大转盘内圆的半径
    startAngle:0,       //开始角度
     
    bRotate:false       //false:停止;ture:旋转
};
 
$(document).ready(function(){
  //动态添加大转盘的奖品与奖品区域背景颜色
  turnplate.restaraunts = ["50M免费流量包", "10金币", "谢谢参与", "5金币", "10M免费流量包", "20M免费流量包", "20金币 ", "30M免费流量包", "100M免费流量包", "2金币"];
  turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
 
   
  var rotateTimeOut = function (){
    $('#wheelcanvas').rotate({
      angle:0,
      animateTo:2160,
      duration:8000,
      callback:function (){
        alert('网络超时，请检查您的网络设置！');
      }
    });
  };
 
  //旋转转盘 item:奖品位置; txt：提示语;
  var rotateFn = function (item, txt){
    var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
    if(angles<270){
      angles = 270 - angles; 
    }else{
      angles = 360 - angles + 270;
    }
    $(&#39;#wheelcanvas&#39;).stopRotate();
    $(&#39;#wheelcanvas&#39;).rotate({
      angle:0,
      animateTo:angles+1800,
      duration:8000,
      callback:function (){
        alert(txt);
        turnplate.bRotate = !turnplate.bRotate;
      }
    });
  };
 
  $(&#39;.pointer&#39;).click(function (){
    if(turnplate.bRotate)return;
    turnplate.bRotate = !turnplate.bRotate;
    //获取随机数(奖品个数范围内)
    var item = rnd(1,turnplate.restaraunts.length);
    //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
    rotateFn(item, turnplate.restaraunts[item-1]);
  });
});
 
function rnd(n, m){
  var random = Math.floor(Math.random()*(m-n+1)+n);
  return random;
   
}
 
 
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
  drawRouletteWheel();
};
 
function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {
    //根据奖品个数计算圆周角度
    var arc = Math.PI / (turnplate.restaraunts.length/2);
    var ctx = canvas.getContext("2d");
    //在给定矩形内清空一个矩形
    ctx.clearRect(0,0,422,422);
    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
    ctx.stroke;
    //font 属性设置或返回画布上文本内容的当前字体属性
    ctx.font = &#39;16px Microsoft YaHei&#39;;      
    for(var i = 0; i < turnplate.restaraunts.length; i++) {       
      var angle = turnplate.startAngle + i * arc;
      ctx.fillStyle = turnplate.colors[i];
      ctx.beginPath();
      //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
      ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
      ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
      ctx.stroke();  
      ctx.fill();
      //锁画布(为了保存之前的画布状态)
      ctx.save();   
       
      //----绘制奖品开始----
      ctx.fill;
      var text = turnplate.restaraunts[i];
      var line_height = 17;
      //translate方法重新映射画布上的 (0,0) 位置
      ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
       
      //rotate方法旋转当前的绘图
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
       
      /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
      if(text.indexOf("M")>0){//流量包
        var texts = text.split("M");
        for(var j = 0; j<texts.length; j++){
          ctx.font = j == 0?&#39;bold 20px Microsoft YaHei&#39;:&#39;16px Microsoft YaHei&#39;;
          if(j == 0){
            ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
          }else{
            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
          }
        }
      }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围 
        text = text.substring(0,6)+"||"+text.substring(6);
        var texts = text.split("||");
        for(var j = 0; j<texts.length; j++){
          ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
        }
      }else{
        //在画布上绘制填色的文本。文本的默认颜色是黑色
        //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      }
       
      //添加对应图标
      if(text.indexOf("金币")>0){
        var img= document.getElementById("shan-img");
        img.onload=function(){  
          ctx.drawImage(img,-15,10);      
        }; 
        ctx.drawImage(img,-15,10);  
      }else if(text.indexOf("谢谢参与")>=0){
        var img= document.getElementById("sorry-img");
        img.onload=function(){  
          ctx.drawImage(img,-15,10);      
        };  
        ctx.drawImage(img,-15,10);  
      }
      //把当前画布返回（调整）到上一个save()状态之前 
      ctx.restore();
      //----绘制奖品结束----
    }     
  } 
}

HTML5真的是一个相当出色的Web技术，它不仅可以让你更加方便地操纵页面元素，而且可以通过canvas实现更多的动画特效，引进HTML5标准后，CSS3也就可以发挥更大的作用。本文主要介绍了一些基于HTML5 Canvas的动画特效，分享给大家，希望大家喜欢。

1、HTML5 Canvas瀑布动画 超逼真

这是一个很逼真的HTML5瀑布动画，基于Canvas实现的，效果相当酷。

在线演示源码下载

2、HTML5 Canvas彩色像素进度条动画

这也是一款基于HTML5 Canvas的动画特效，它是一个很有创意的HTML5进度条，大家可以试试。

在线演示源码下载

3、HTML5 Canvas粒子模拟效果

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。

在线演示源码下载

4、HTML5 Canvas放射线动画

这款HTML5 Canvas尽管不怎么实用，但是你可以从中学到很多HTML5的相关知识，包括如何绘制动态直线，如果计算节点之间的距离等。

在线演示源码下载

5、HTML5动感的火焰燃烧动画特效

这是一款非常逼真而且炫酷的HTML5火焰动画，火焰的窜动跟真的蜡烛火焰差不多。

在线演示源码下载

6、HTML5 Canvas 3D折线图表应用

这款HTML5图表很特别，首先它是基于Canvas的，其次它有3D的折线动画。

在线演示源码下载

7、HTML5 SVG 树枝分叉动画特效

它是一个可以自动分叉的树，动画将以二叉树的形式展开。这三颗SVG树先是用svg的g画笔来定义这些树枝，然后利用javascript来实现动态改变g从而实现树枝的分叉展开动画。

在线演示源码下载

以上这7款HTML5 Canvas动画都非常炫酷，你可以下载源码来研究HTML5的相关知识。

也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。

在线演示源码下载

HTML代码

<divhttps://www.jb51.cc/tag/dis/" target="_blank">display:none">
		<video id="sourcevid" autoplay="true" loop="true">
			<source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
			<source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
		</video>
		<canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
<center>
	<div>Click video to blow it up!</div>
	<canvas id="output" width="1000" height="600" onmousedown="dropBomb(event,this)">        </canvas>
</center>
</div>

JavaScript代码

var video;
var copy;
var copycanvas;
var draw;

var TILE_WIDTH = 32;
var TILE_HEIGHT = 24;
var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {x:0,y:0,width:0,height:0};
var PAINTRECT = {x:0,width:1000,height:600};

function init(){
	video = document.getElementById('sourcevid');
	copycanvas = document.getElementById('sourcecopy');
	copy = copycanvas.getContext('2d');
	var outputcanvas = document.getElementById('output');
	draw = outputcanvas.getContext('2d');
	setInterval("processFrame()",33);
}
function createTiles(){
	var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
	var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
	var y=0;
	while(y < SOURCERECT.height){
		var x=0;
		while(x < SOURCERECT.width){
			var tile = new Tile();
			tile.videoX = x;
			tile.videoY = y;
			tile.originX = offsetX+x;
			tile.originY = offsetY+y;
			tile.currentX = tile.originX;
			tile.currentY = tile.originY;
			tiles.push(tile);
			x+=TILE_WIDTH;
		}
		y+=TILE_HEIGHT;
	}
}

var RAD = Math.PI/180;
var randomJump = false;
var tiles = [];
var debug = false;
function processFrame(){
	if(!isNaN(video.duration)){
		if(SOURCERECT.width == 0){
			SOURCERECT = {x:0,width:video.videoWidth,height:video.videoHeight};
			createTiles();
		}
		//this is to keep my sanity while developing
		if(randomJump){
			randomJump = false;
			video.currentTime = Math.random()*video.duration;
		}
		//loop
		if(video.currentTime == video.duration){
			video.currentTime = 0;
		}
	}
	var debugStr = "";
	//copy tiles
	copy.drawImage(video,0);
	draw.clearRect(PAINTRECT.x,PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

	for(var i=0; i<tiles.length; i++){
		var tile = tiles[i];
		if(tile.force > 0.0001){
			//expand
			tile.moveX *= tile.force;
			tile.moveY *= tile.force;
			tile.moveRotation *= tile.force;
			tile.currentX += tile.moveX;
			tile.currentY += tile.moveY;
			tile.rotation += tile.moveRotation;
			tile.rotation %= 360;
			tile.force *= 0.9;
			if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
				tile.moveX *= -1;
			}
			if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
				tile.moveY *= -1;
			}
		}else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
			//contract
			var diffx = (tile.originX-tile.currentX)*0.2;
			var diffy = (tile.originY-tile.currentY)*0.2;
			var diffRot = (0-tile.rotation)*0.2;

			if(Math.abs(diffx) < 0.5){
				tile.currentX = tile.originX;
			}else{
				tile.currentX += diffx;
			}
			if(Math.abs(diffy) < 0.5){
				tile.currentY = tile.originY;
			}else{
				tile.currentY += diffy;
			}
			if(Math.abs(diffRot) < 0.5){
				tile.rotation = 0;
			}else{
				tile.rotation += diffRot;
			}
		}else{
			tile.force = 0;
		}
		draw.save();
		draw.translate(tile.currentX,tile.currentY);
		draw.rotate(tile.rotation*RAD);
		draw.drawImage(copycanvas,tile.videoX,tile.videoY,TILE_WIDTH,TILE_HEIGHT,-TILE_CENTER_WIDTH,-TILE_CENTER_HEIGHT,TILE_HEIGHT);
		draw.restore();
	}
	if(debug){
		debug = false;
		document.getElementById('trace').innerHTML = debugStr;
	}
}

function explode(x,y){
	for(var i=0; i<tiles.length; i++){
		var tile = tiles[i];

		var xdiff = tile.currentX-x;
		var ydiff = tile.currentY-y;
		var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);

		var randRange = 220+(Math.random()*30);
		var range = randRange-dist;
		var force = 3*(range/randRange);
		if(force > tile.force){
			tile.force = force;
			var radians = Math.atan2(ydiff,xdiff);
			tile.moveX = Math.cos(radians);
			tile.moveY = Math.sin(radians);
			tile.moveRotation = 0.5-Math.random();
		}
	}
	tiles.sort(zindexSort);
	processFrame();
}
function zindexSort(a,b){
	return (a.force-b.force);
}

function dropBomb(evt,obj){
	var posx = 0;
	var posy = 0;
	var e = evt || window.event;
	if (e.pageX || e.pageY){
		posx = e.pageX;
		posy = e.pageY;
	}else if (e.clientX || e.clientY) {
		posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	var canvasX = posx-obj.offsetLeft;
	var canvasY = posy-obj.offsetTop;
	explode(canvasX,canvasY);
}

function Tile(){
	this.originX = 0;
	this.originY = 0;
	this.currentX = 0;
	this.currentY = 0;
	this.rotation = 0;
	this.force = 0;
	this.z = 0;
	this.moveX= 0;
	this.moveY= 0;
	this.moveRotation = 0;

	this.videoX = 0;
	this.videoY = 0;
}

/*
	getPixel
	return pixel object {r,g,b,a}
*/
function getPixel(imageData,x,y){
	var data = imageData.data;
	var pos = (x + y * imageData.width) * 4;
	return {r:data[pos],g:data[pos+1],b:data[pos+2],a:data[pos+3]}
}
/*
	setPixel
	set pixel object {r,a}
*/
function setPixel(imageData,y,pixel){
	var data = imageData.data;
	var pos = (x + y * imageData.width) * 4;
	data[pos] = pixel.r;
	data[pos+1] = pixel.g;
	data[pos+2] = pixel.b;
	data[pos+3] = pixel.a;
}
/*
	copyPixel
	faster then using getPixel/setPixel combo
*/
function copyPixel(sImageData,sx,sy,dImageData,dx,dy){
	var spos = (sx + sy * sImageData.width) * 4;
	var dpos = (dx + dy * dImageData.width) * 4;
	dImageData.data[dpos] = sImageData.data[spos];     //R
	dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
	dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
	dImageData.data[dpos+3] = sImageData.data[spos+3]; //A
}
</script>

在线演示源码下载