大概成果就是半成品的抽奖转盘，主要说一下属性相关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ position: relative; width: 1000px; height: 1000px; } div canvas{ width: 500px; height: 500px; } #myCanvas{
<!--动画过渡，第一个参数是要改变的属性，第二个参数是从现有属性到新的属性需要多长事件实现--> transition: transform 6s; -o-transition: transform 6s; -moz-transition: transform 6s; -webkit-transition: transform 6s;
<!--若要旋转图形，是以什么为中心旋转，下面是以画布的中心为点旋转，注意不是所画图形的中心，而是画布--> -o-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; -webkit-transform-origin: center center; transform-origin:center center;
<!--动画的实现，第一个参数是绑定动画的名字，第二个参数是运行动画的时间--> animation: myfirst 5s; -webkit-animation: myfirst 5s; position: absolute; z-index: 20; }
<!--动画具体操作的方法，form{}to{}就是从哪个属性变到什么--> @keyframes myfirst { form{background-color: red;} to{background-color: yellow;} } @-webkit-keyframes myfirst { form{background-color: red;} to{background-color: yellow;} } #myCanvas01{ position: absolute; z-index: 30; } #myCanvas02{ position: absolute; z-index: 40; } #myCanvas03{ position: absolute; } .myButton_class{ left:200px; top:200px; width: 100px; height: 100px; position: absolute; border: none; background-color: transparent; z-index: 50; } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> </head> <body> <div>
<!--创建一个画图，具体画什么图形，要在js里实现--> <canvas id="myCanvas" width="500px" height="500px"></canvas> <canvas id="myCanvas01" width="500px" height="500px"></canvas> <canvas id="myCanvas02" width="500px" height="500px"></canvas> <canvas id="myCanvas03" width="500px" height="500px"></canvas> <button id="myButton" class="myButton_class">开始抽奖</button> </div> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var canvas01=document.getElementById('myCanvas01'); var canvas02=document.getElementById('myCanvas02'); var canvas03=document.getElementById('myCanvas03'); var ctx=canvas.getContext('2d'); var ctx01=canvas01.getContext('2d'); var ctx02=canvas02.getContext('2d'); var ctx03=canvas03.getContext('2d'); var yuanx=250,yuany=250; var x=200; var y=200,r=100; var n=8; var angle=(Math.PI*2)/n; var x1,x2,y1,y2; x1=x2=200; y1=y2=200; //旋转次数 var rotNum=0; for(var i=1;i<=n;i++){
//保存画布，将现有的画图推到图形栈中 ctx.save();
//开始一个新的画笔，不带有之前的任何参数 ctx.beginPath();
//圆的画法，参数一次是圆心x，圆心y，半径，开始角度，结束角度 ctx.arc(yuanx,yuany,75,angle*i,angle*i+angle);
//画笔的线条宽度，若要画实心圆，一般为半径的两倍 ctx.lineWidth=150; if(i%2==0){ ctx.strokeStyle="#626262"; }else{ ctx.strokeStyle="#787878"; }
//将画好的图形真正的画到网页上 ctx.stroke();
//取出图形栈中的图形 ctx.restore(); }
//应该是结束画笔的意思 ctx.closePath(); ctx01.beginPath(); ctx01.arc(yuanx,yuany,25,0,2*Math.PI); ctx01.lineWidth=50; ctx01.strokeStyle="rgba(0,0,0,0.5)"; ctx01.stroke(); ctx01.closePath(); ctx02.beginPath(); ctx02.arc(yuanx,yuany,15,0,2*Math.PI); ctx02.lineWidth=30; ctx02.strokeStyle="rgb(219,20,20)"; ctx02.stroke(); ctx02.save(); ctx02.beginPath() ctx02.arc(yuanx,yuany-50,20,Math.PI*2/5,Math.PI*3/5); ctx02.lineWidth=40; ctx02.strokeStyle="rgb(219,20,20)"; ctx02.stroke(); ctx02.restore(); //ctx02.save(); // ctx02.strokeStyle="rgb(219,20,20)"; ctx02.restore(); ctx02.closePath();
//按钮的单击时间，若点击按钮，则开始执行function（）里的函数 $('#myButton').bind('click',function (){ var num=parseInt(Math.random()*n-0+0); alert("被点击"+num); angles=360; var degValue='rotate('+angles+'deg)';
//改变css属性，第一参数是属性的名称，第二个参数是属性的值 $('#myCanvas').css('-o-transform',degValue); $('#myCanvas').css('-ms-transform',degValue); $('#myCanvas').css('-wekit-transform',degValue); $('#myCanvas').css('-moz-transform',degValue); $('#myCanvas').css('transform',degValue);
//改变css属性，第一参数是属性的名称，第二个参数是属性的值；
//attr与css的区别：css一般是指style的属性，attr可以改变标签等更多的属性；
//attr可以改变img标签的src的值，a标签的href的值，一般来说，attr包含css
//prop方法也可以设置标签属性的值，但该方法可以返回属性的值，attr不能 $('#myButton').attr('disabled',true); setTimeout(function (){
//移除更改的属性 $('#myButton').removeAttr('disabled',true); },6000); }); </script> </body> </html>
其他相关：
关于CSS动画：
@keyframes 用来定义动画序列，animation 属性用来为标签盒子引用动画序列，同一个动画序列可以被多个标签盒子引用。
1、anmation-name：名字
2、animation-duration ：时长
3、animation-delay：延时
4、animation-fill-mode：结束状态
- forwards 动画结束时，保持最后一帧的样式
- backwards 动画结整时，恢复标签盒子原本的样式，该值为默认值
5、animation-timimg-function：速度曲线
- linear：匀速
- ease：逐渐慢下来
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速
6、animation-iteration-count:重复执行
- infinite ：动画无限循环执行
- 默认为 1 次认为 1
7、animation-direction:单独指定是否逆向执行
8、animation-play-state:动画是否暂停
paused：动画暂停running:动画继续
animation:名字+时长+延时+结束状态+速度曲线+重复执行