<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>star</title>
<style>
canvas{
border: solid 1px black;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<!-- // <script src="../js/star.js"></script> -->
<script>
window.onload=function(){
var can=document.getElementById("canvas");
var ctx=can.getContext("2d");
var w=can.width;
var h=can.height;
ctx.fillStyle="black";
ctx.fillRect(0, 0, w, h);
for(var i=0;i<20;i++)
{
var r=Math.random()*10+10;
var x=Math.random()*w;
var y=Math.random()*h;
var a=Math.random()*360;
drawStar(ctx,x,y,r,r/2.0,a);
}
// drawStar(ctx,400,400,300,150,30);
}
function drawStar(ctx,x,y,R,r,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+x);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+y,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
ctx.closePath();
ctx.lineWidth=10;
ctx.fillStyle="#fb3";
ctx.strokeStyle="#fb5";
ctx.fill();
ctx.stroke();
}
</script>
</body>
</html>
