?<canvas id="star" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>?

?? //一片星空

? ? function starTwo() {

? ? ? ? var canvas = document.getElementById("star");

? ? ? ? canvas.width = 1200;

? ? ? ? canvas.height = 800;

? ? ? ? var context = canvas.getContext("2d");

? ? ? ? var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height);

? ? ? ? skyStyle.addColorStop(0.0, "#000");

? ? ? ? skyStyle.addColorStop(1.0, "#035");

? ? ? ? context.fillStyle = skyStyle;

? ? ? ? context.fillRect(0, 0, canvas.width, canvas.height);

? ? ? ? for (var i = 0; i < 200; i++) {

? ? ? ? ? ? var r = Math.random() * 5 + 5;

? ? ? ? ? ? var x = Math.random() * canvas.width;

? ? ? ? ? ? var y = Math.random() * canvas.height*0.65;

? ? ? ? ? ? var a = Math.random() * 360;

? ? ? ? ? ? drawStarTwo(context, x, y, r, a);

? ? ? ? }

? ? }

? ? //繪制五角星

? ? function drawStarTwo(cxt, x, y, R, rot) {

? ? ? ? cxt.save();

? ? ? ? cxt.rotate(rot / 180 * Math.PI);

? ? ? ? cxt.translate(x, y);

? ? ? ? //cxt.scale(R, R);

? ? ? ? starPath(cxt);

? ? ? ? cxt.fillStyle = "#fb3";

? ??

? ? ? ? cxt.fill();

? ? ??

? ? ? ? cxt.restore();

? ? ? ? //繪制出在（x,y）,大小為R，旋轉(zhuǎn)rot度的五角星

? ? }

? ? function starPath(cxt) {

? ? ? ? cxt.beginPath();

? ? ? ? for (var i = 0; i < 5; i++) {

? ? ? ? ? ? cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI)*20 , -Math.sin((18 + i * 72 ) / 180 * Math.PI)*20);

? ? ? ? ? ? cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5*20, -Math.sin((54 + i * 72 ) / 180 * Math.PI) *0.5*20);

? ? ? ? }

? ? ? ? cxt.closePath();

?

? ? }

? ? window.onload = function () {

? ??

? ? ? ? starTwo();

? ? }