程序运行截图如下：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
window.onload = function() {
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
for(let i = 0; i < 200; i++){
let r = Math.random() * 10 + 10;
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let a = Math.random() * 360;
drawStar(context, x, y, r, r / 2.0, a);
}
}
function drawStar(cxt, x, y, outerR, innerR, rot){
cxt.beginPath();
for(let i = 0; i < 5; i++){
cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * outerR + x,
-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * outerR + y);
cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x,
-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);
}
cxt.closePath();
cxt.fillStyle = "#fb3";
cxt.strokeStyle = "#fd5";
cxt.lineWidth = 3;
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
