![效果圖]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas繪製五星紅旗</title>
<Style>
#starCanvas{
}
</Style>
</head>
<body>
<div>
<canvas id="starCanvas" width="450" height="300">
</canvas>
</div>
<script>
window.οnlοad=function(){
fiveStar();
}
function fiveStar(){
var cxt = document.getElementById("starCanvas").getContext('2d');
cxt.beginPath();
cxt.fillStyle="#F40002";
cxt.fillRect(0,0,450,300);
cxt.closePath();
cxt.translate(75,75);
cxt.save();
cxt.rotate(Math.PI*2/5/2);
strowStar(cxt,40);
cxt.restore();
cxt.save();
cxt.translate(80,-50);
strowStar(cxt,10);
cxt.restore();
cxt.save();
cxt.translate(110,-10);
strowStar(cxt,10);
cxt.restore();
cxt.save();
cxt.translate(110,30);
strowStar(cxt,10);
cxt.restore();
cxt.save();
cxt.translate(80,70);
strowStar(cxt,10);
cxt.restore();
}
function strowStar(cxt,r,R){
cxt.save();
cxt.beginPath();
cxt.moveTo(0,r);
for(var i=0;i<9;i++){
cxt.rotate(Math.PI/5);
if(i%2==0){
cxt.lineTo(Math.cos( (54+72*i)/180*Math.PI) * r,Math.sin((54+72*i)/180*Math.PI) * r);
}else{
cxt.lineTo(Math.cos( (18+72*i)/180*Math.PI) * R, Math.sin((18+72*i)/180*Math.PI) * R);
}
}
cxt.closePath();
cxt.fillStyle="#FAF408";
cxt.fill();
cxt.restore();
}
</script>
</body>
</html>
