canvas隨機生成星星(轉)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas">你的瀏覽器不支援</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");//使用context繪製
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//context.fillStyle = "black";
/*線性漸變*/
var linearGrad = context.createLinearGradient(0, 0, 0, 700);
linearGrad.addColorStop(0.0,"#444");
linearGrad.addColorStop(1.0,"#000");
context.fillStyle = linearGrad;
context.fillRect(0, 0, canvas.width, canvas.height);
/*迴圈顯示多少個星星*/
function run(){
for(var i = 0; i < 123; i ++){
var r = Math.random() * 5 + 1;
drawStar(context,
r,
2 * r,
Math.random() * canvas.width,
Math.random() * canvas.height);
}
}
run();
/*繪製五角星*/
function drawStar(cxt, r, R, x, y){
cxt.beginPath();
var str =('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//隨機生成
for(var i = 0; i < 5; i ++ ){
cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
-Math.sin((18 + i * 72) / 180 * Math.PI) * R + y) ;
cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
-Math.sin((54 + i * 72) / 180 * Math.PI) * r + y) ;
}
cxt.fillStyle = "#"+str;
cxt.strokeStyle ="#"+str;
cxt.closePath();
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>