做了一个五角星 组合 旋转的动画效果 ：）
来源：3-2 画一个五角星
午夜屠猪男
2015-04-24 18:17
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script>;(function(){var w=parseInt(window.screen.width),s=w/500,u=navigator.userAgent.toLowerCase(),m='<meta name="viewport" content="width=640,';if(/android (\d+\.\d+)/.test(u)){if(parseFloat(RegExp.$1)>2.3)m+='minimum-scale='+s+',maximum-scale='+s+',';}else{m+='user-scalable=no,';}m+='target-densitydpi=device-dpi">';document.write(m);}());</script>
<title>五角星</title>
<style>
*{margin:0 auto;overflow:hidden;color:#fff;font-size:20px;}
canvas{
position:absolute;top:40%;left:50%;margin:-200px 0 0 -200px;
}
</style>
</head>
<body style="background:#000;color:#fff;">
<canvas id="myCanvas" style="">你使用的浏览器不支持显示，请更换<a href="http://www.baidu.com/s?wd=chrome&rsv_spt=1&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=01025065_7_pg&rsv_enter=1&rsv_sug3=8&rsv_sug1=11&rsv_sug2=0&inputT=1875&rsv_sug4=2285" target="_blank">现代浏览器</a></canvas>
<script>
var now_r,now_rot;
(function(){
var canvas = document.getElementById('myCanvas'),
con = canvas.getContext('2d'),
W = 400,
H = 400,
s = setTimeout;
canvas.width = W;
canvas.height = H;
con.fillStyle = '#000';
con.fillRect(0,0,W,H);
function f(r,rot,w){
con.fillStyle = '#000';
con.fillRect(0,0,W,H);
con.beginPath();
con.strokeStyle = '#fff';
con.lineWidth = 1;
con.arc(W/2,H/2,199,Math.PI*1.5,Math.PI*(1.5 + 2));
con.stroke();
con.beginPath();
con.strokeStyle = '#fff';
con.lineWidth = 1;
con.arc(W/2,H/2,199,Math.PI*1.5,Math.PI*(1.5 + 2));
con.stroke();
w.forEach(function(p,key){
if(p===1){
drawWJX(con,180,0+r,W/2,H/2,1,'#fff',18*key+rot);
}
});
now_r = r;
now_rot = rot;
console.log(now_r,now_rot)
}
r0(function(){
r1(function(){
r2(function(){
r3(function(){
r4(function(){
r5();
});
});
});
});
});
function r0(callback){
var now = 0;
(function(){
now += 0.02;
//底色
con.fillStyle = "#000";
con.fillRect(0, 0, W, H);
//进度
con.beginPath();
con.strokeStyle = '#fff';
con.lineWidth = 1;
con.arc(W/2,H/2,199,Math.PI*1.5,Math.PI*(1.5 + now));
con.stroke();
con.beginPath();
con.strokeStyle = '#fff';
con.lineWidth = 1;
con.arc(W/2,H/2,199,Math.PI*1.5,Math.PI*(1.5 + now));
con.stroke();
if(now<2){
s(arguments.callee,20)
}else{
s(function(){
f(90,0,[1,0,0,0]);
s(function(){
f(90,0,[1,1,0,0]);
s(function(){
f(90,0,[1,1,1,0]);
s(function(){
f(90,0,[1,1,1,1]);
s(function(){
if(callback){
callback();
}
},1000);
},1000);
},1000);
},1000);
},1000);
}
}());
}
function r1(callback){
var rot = 0;
(function(){
f(90,rot,[1,1,1,1]);
rot += 0.2;
if(rot<=20){
s(arguments.callee,20);
}else{
if(callback){
s(function(){callback()},20)
}
}
}())
}
function r2(callback){
var r = now_r+1,
rot = now_rot+0.2;
(function(){
f(r,rot,[1,1,1,1]);
rot += 0.2;
r += 1;
if(r<=180){
s(arguments.callee,20);
}else{
var count = 0;
(function(){
rot += 0.2;
f(r,rot,[1,1,1,1]);
count++;
if(count<50){
s(arguments.callee,20);
}else{
if(callback){
s(function(){callback()},20)
}
}
}());
}
}());
}
function r3(callback){
var r = now_r-1,
rot = now_rot+0.2;
(function(){
f(r,rot,[1,1,1,1]);
rot += 0.2;
r -= 1;
if(r>0){
s(arguments.callee,20);
}else{
var count = 0;
(function(){
rot += 0.2;
f(r,rot,[1,1,1,1]);
count++;
if(rot<108){
s(arguments.callee,20);
}else{
if(callback){
s(function(){callback()},20)
}
}
}());
}
}());
}
function r4(callback){
var move = 1,
r = now_r+ move,
rot = now_rot+0.2;
(function(){
f(r,rot,[1,1,1,1]);
rot += 0.2;
r += move;
if(r>180){
move = -1;
r = 180+move;
}
if(!(move === -1 && r<=90)){
s(arguments.callee,20);
}else{
(function(){
rot += 0.2;
f(r,rot,[1,1,1,1]);
if(Math.round(rot*10)<1800){
s(arguments.callee,20);
}else{
if(callback){
s(function(){callback()},20)
}
}
}());
}
}());
}
function r5(){
var r = now_r,
rot = 0.2,
count = 0,
w = [1,1,1,1];
(function(){
f(r,rot,w);
rot += 0.2;
count++;
if(count>50 && count<=100){
w = [1,1,1,0]
}else if(count>100 && count<=150){
w = [1,1,0,0]
}else if(count>150 && count<=250){
w = [1,0,0,0]
}else if(count>250 && count<=300){
w = [1,1,0,0]
}else if(count>300 && count<=350){
w = [1,1,1,0]
}else if(count>350 && count<=400){
w = [1,1,1,1]
}else if(count === 450){
s(function(){
r1(function(){
r2(function(){
r3(function(){
r4(function(){
r5();
});
});
});
});
},20);
return;
}
s(arguments.callee,20);
}());
}
function drawWJX(con,R,r,x,y,lineWidth,strokeStyle,rotate){
con.beginPath();
for(var i= 0;i<5;i++){
con.lineTo(Math.cos((18-rotate+i*72)/180*Math.PI)*R+x,-Math.sin((18-rotate+i*72)/180*Math.PI)*R+y);
con.lineTo(Math.cos((54-rotate+i*72)/180*Math.PI)*r+x,-Math.sin((54-rotate+i*72)/180*Math.PI)*r+y);
}
con.strokeStyle = strokeStyle;
con.lineWidth = lineWidth;
con.closePath();
con.stroke();
}
}());
</script>
</body>
</html>做了一个五角星 组合 旋转的动画效果
写回答
关注
5回答
-
- 唐飞和唐菲菲
- 2016-09-27 19:42:22
顶礼膜拜
-
- qq_lzY
- 2016-03-10 11:21:50
在哪都能看到这么厉害的人，彩笔的我们怎么活^(*￣(oo)￣)^
-
- Sylophone
- 2015-10-11 15:02:18
厉害~
-
- 979103157
- 2015-06-24 11:22:01
流弊！！参考了学习了
-
- jimmyfan
- 2015-05-03 19:18:20
牛
楼主，在下拜服！
Canvas绘图详解
Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图
72881 学习 · 422 问题
相似问题