<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"> </canvas> <script> window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); context.fillStyle="black";// 填充矩形 context.fillRect(0,0,canvas.width,canvas.height); for(i=0;i<200;i++){// Math.round()为0~1 所以r的值为10~20 var r=Math.random()*10+10; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; var a=Math.random()*360; drawStar(context,r,x,y,a); } } function drawStar(cxt,R,x,y,rot){ starPath(cxt); // 绘制在(x,y),半径为R,,旋转角度为rot的五角星 }// 绘制标准五角星 function starPath(cxt){ cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); } cxt.closePath(); } </script> </body></html>
添加回答
举报
0/150
提交
取消