<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-2 画一个五角星</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">当前浏览器不支持Canvas,请更换浏览器再试</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d"); //context绘制
context.lineWidth = 10;
drawStar(context, 150, 300, 400, 400);
}
function drawStar(cxt, r, R, x, y){
cxt.beginPath();
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.closePath();
cxt.stroke();
}
</script>
</body>
</html>