Canvas 绘制星空
Posted liangtao999
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas 绘制星空相关的知识，希望对你有一定的参考价值。
效果图：
知识点：
1、ctx.save(); //保存ctx状态
ctx.restore();//回到之前ctx的状态
一般ctx.save()与ctx.restore()是成对出现的，比如我们在绘图的时候需要使用多种颜色，颜色需要不时的切换。那么使用save()和restore()方法即可比较方便的实现此功能。调用了restore方法将设置回到前一个save状态。一旦我们调用 restore，状态堆中最后的状态会弹出，并恢复所有设置。
2、ctx.translate(x,y);//移动
3、ctx.rotate(rot/180*Math.PI);//旋转角度
4、注意：ctx.scale 会对左顶点，边框线均放大。
5、 transform() 允许您缩放、旋转、移动并倾斜当前的环境。
a d 水平、垂直缩放
b c 水平、垂直倾斜
e f 水平、垂直位移
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } #canvas{ display:block; border:1px solid #ccc; margin:20px auto; } </style> </head> <body> <canvas id="canvas">您的浏览器不支持</canvas> </body> <script> var canvas=document.getElementById("canvas"); canvas.width=700; canvas.height=500; var ctx=canvas.getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0,0,canvas.width,canvas.height); //绘制星空 for(var i=0;i<300;i++) { var r=Math.random()*5+1;//10-20 var rot=Math.random()*360; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; drawStar(ctx,x,y,r,r/2,rot); } //绘制五角星函数 function drawStar(ctx,x,y,outerR,innerR,rot){//rot旋转角度 ctx.beginPath(); for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x, -Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x, -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y); } ctx.closePath(); ctx.fillStyle="#fb3"; ctx.strokeStyle="#fd5" ctx.lineWidth=3; ctx.lineJoin="round"; ctx.fill(); ctx.stroke(); } </script> </html>
更好的写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } #canvas{ display:block; border:1px solid #ccc; margin:20px auto; } </style> </head> <body> <canvas id="canvas">您的浏览器不支持</canvas> </body> <script> var canvas=document.getElementById("canvas"); canvas.width=700; canvas.height=500; var ctx=canvas.getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0,0,canvas.width,canvas.height); //绘制星空 for(var i=0;i<300;i++) { var r=Math.random()*5+1;//10-20 var rot=Math.random()*360; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; drawStar(ctx,x,y,r,rot); } //对状态进行设置 function drawStar(ctx,x,y,r,rot) { ctx.save(); //保存ctx状态 ctx.translate(x,y);//移动 ctx.rotate(rot/180*Math.PI);//旋转角度 starPath(ctx,r); ctx.fillStyle="#fb3"; ctx.strokeStyle="#fd5" ctx.lineWidth=3; ctx.lineJoin="round"; ctx.fill(); ctx.stroke(); ctx.restore();//回到之前ctx的状态 } //封装五角星函数 function starPath(ctx,r){ ctx.beginPath(); for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*r, -Math.sin((18+i*72)/180*Math.PI)*r); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*(r/2), -Math.sin((54+i*72)/180*Math.PI)*(r/2)); } ctx.closePath(); } </script> </html>
以上是关于Canvas 绘制星空的主要内容，如果未能解决你的问题，请参考以下文章