亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

<label id="bi34o"><button id="bi34o"><dd id="bi34o"></dd></button></label>

<fieldset id="bi34o"><button id="bi34o"></button></fieldset>

<sup id="bi34o"><form id="bi34o"><dd id="bi34o"></dd></form></sup><menuitem id="bi34o"><code id="bi34o"></code></menuitem>

                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas繪圖詳解

做了一個五角星組合旋轉的動畫效果：）

<!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?>現代瀏覽器</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>

做了一個五角星組合旋轉的動畫效果

午夜屠豬男

2015-04-24

源自：Canvas繪圖詳解 3-2

關注問題我要回答

2367

操作

收起

5 回答

唐飛和唐菲菲
2016-09-27

頂禮膜拜

0 回復有任何疑惑可以回復我~

qq_lzY
2016-03-10

在哪都能看到這么厲害的人，彩筆的我們怎么活^(*￣(oo)￣)^

0 回復有任何疑惑可以回復我~

Sylophone
2015-10-11

厲害~

0 回復有任何疑惑可以回復我~

979103157
2015-06-24

流弊??！參考了學習了

0 回復有任何疑惑可以回復我~

jimmyfan
2015-05-03

牛

樓主，在下拜服！

0 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

Canvas繪圖詳解

參與學習 72996 人
解答問題 441 個

Canvas系列教程第二課,詳解Canvas各接口，讓同學徹底掌握Canvas繪圖

本課相似問答

3 回答畫五角星的問題

4 回答ctx代表整個畫布，那ctx.rotate(rot / 180 * Math.PI)是旋轉畫布而不是單個五角星嗎？

3 回答為什么我加了旋轉五角星就跑到黑布外面去了呢？

1 回答平鋪五角星

3 回答為什么我的五角星沒有畫出來，全黑了呢？

搜索更多本課相關問答

做了一個五角星組合旋轉的動畫效果：）

我要回答關注問題

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號

<span id="mcb3x"><code id="mcb3x"><em id="mcb3x"></em></code></span>

<span id="mcb3x"></span>