課程
/前端開發(fā)
/Html5
/Canvas繪圖詳解
我做一個判斷,判斷兩個大圓的弧線坐標不一樣,這樣可以實現(xiàn)不重疊么,
2015-09-25
源自:Canvas繪圖詳解 4-1
正在回答
var?stars?=[]; $(function(){ var?canvas=$("#canvas"); canvas.width=800; canvas.height=800; var?context=canvas[0].getContext("2d"); context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); addStars(); upadteStars(); console.log(stars.length); drowStarSky(context); }) //添加200個隨機星星到星星的數(shù)組 function?addStars()?{ //?body... for?(var?i?=?0;?i?<?200;?i++)?{ var?star={ ? r:Math.random()*10+10, ? x:Math.random()*(canvas.width-40)+20, ? y:Math.random()*(canvas.height-40)+20, ? a:Math.random()*360 ? } ? stars.push(star); }; } //去掉重合的星星 function?upadteStars?()?{ for?(var?i?=?0;?i?<?stars.length;?i++)?{ for?(var?j?=?i+1;?j?<?stars.length;?j++)?{ var?a=Math.pow(stars[i].x-stars[j].x,2); var?b=Math.pow(stars[i].y-stars[j].y,2); var?c=Math.pow(stars[i].r+stars[j].r,2) if(a+b<c){ stars.splice(j,1); } }; }; } //將不重合的星星全部畫入畫布 function?drowStarSky(context){ for?(var?i?=?0;?i?<?stars.length;?i++)?{ drowStar(stars[i].r/2,stars[i].r,stars[i].x,stars[i].y,context,stars[i].a); }; } //畫一個星星 function?drowStar?(r,R,x,y,ctx,rot)?{ ctx.beginPath(); for?(var?i?=?0;?i?<?5;?i++)?{ ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y) }; ctx.closePath(); ctx.lineJoin="round"; ctx.lineStyle="#058"; ctx.lineWidth=5; ctx.fillStyle="yellow" ctx.fill(); ctx.stroke(); }
CoolHuan
blablabla 回復 CoolHuan
應該不可以
舉報
Canvas系列教程第二課,詳解Canvas各接口,讓同學徹底掌握Canvas繪圖
1 回答關于星星重疊問題
1 回答如何處理星星不重疊呢?
1 回答星星出不來?
1 回答為什么不出星星
1 回答星星的動畫
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2016-06-17
2015-12-31
應該不可以