<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--五角星-->
<script type="text/javascript">
window.onload = function() {
var Five_pointed_star = document.getElementById("Five_pointed_star");
if(Five_pointed_star) {
var context = Five_pointed_star.getContext("2d");
drawStar(context, 5, 5, 5);
} else {
document.writeln("浏览器不支持Five_pointed_star组件");
}
}
function drawStar(context, r, x, y) {
context.lineWidth = 5;
context.beginPath();
var dit = Math.PI * 4 / 5;
var sin = Math.sin(0) * r + y;
var cos = Math.cos(0) * r + x;
console.log(0 + ":" + 0);
context.moveTo(cos, sin);
for(var i = 0; i < 5; i++) {
var tempDit = dit * i;
sin = Math.sin(tempDit) * r + y;
cos = Math.cos(tempDit) * r + x;
context.lineTo(cos, sin);
console.log(sin + ":" + sin + ":" + tempDit);
}
context.closePath();
context.strokeStyle = "red";
context.fillStyle = "black";
context.fill();
}
</script>
<!--end五角星-->
</head>
<body>
<span><canvas id="Five_pointed_star"></canvas></span>
</body>
</html>
