cancas层叠问题
来源：5-1 线性渐变
我是超人我会飞
2015-05-21 11:49
我想问一下老师，如何解决层叠问题
写回答
关注
1回答
-
- asc1120
- 2015-07-18 21:11:18
试着做了下 ，不知道有没有什么问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="canvas" style="display: block; margin: 0 auto; border: 1px solid #999;"></canvas> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=1200; canvas.height=600; var ctx=canvas.getContext("2d"); var skyStyle=ctx.createLinearGradient(0,0,0,canvas.height); skyStyle.addColorStop(0.0,'black'); skyStyle.addColorStop(1.0,'#035') ctx.fillStyle=skyStyle; ctx.fillRect(0,0,canvas.width,canvas.height); fill(canvas.width,canvas.height,5,ctx); } function fill(w,h,r,ctx){ var _data=[]; //储存星星的坐标，用于比较 var abc; for(var i=0;i<200;i++){ var R=Math.round(Math.random()*5)+r; var x=Math.round(Math.random()*(w-2*R))+R; var y=Math.round(Math.random()*(h*0.65-2*R))+R; var rote=Math.round(Math.random()*360); //判断条件，若当前位置与其他星星不重合就会返回其他星星的个数 abc=function(){ var a=0; for(var j=0;j<_data.length;j++){ if(!((_data[j][0]+_data[j][2]>x&&x>_data[j][0]-_data[j][2])&&(_data[j][1]+_data[j][2]>y&&y>_data[j][1]-_data[j][2]))){ a+=1; } } return a; } //满足条件就会重新随机坐标, 注意：画布太小星星太多可能会造成死循环 while(abc()!=_data.length){ x=Math.round(Math.random()*(w-2*R))+R; y=Math.round(Math.random()*(h*0.65-2*R))+R; } _data.push([x,y,R]); //把当前的坐标和半径添加进去，完全分离则设置为2*R drawStart(x,y,R,rote,ctx); } } //绘制图形 function drawStart(x,y,R,rote,ctx){ ctx.lineWidth=R/(R*10); ctx.lineJoin="round"; ctx.fillStyle="yellow"; ctx.strokeStyle="yellow"; ctx.save(); ctx.translate(x,y); ctx.rotate(rote/180*Math.PI); ctx.scale(R,R); startPath(ctx); ctx.fill(); ctx.stroke(); ctx.restore(); } //绘制路径 function startPath(ctx){ ctx.beginPath(); for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI)); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5); } ctx.closePath(); } </script> </body> </html>
Canvas绘图详解
Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图
72885 学习 · 422 问题
相似问题