<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五角星</title>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
if (canvas) {
var context = canvas.getContext("2d");
drawStar(context, 50, 100, 100);
}
}
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 = "#DDDDDD";
context.fill();
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
javascript五角星
最新推荐文章于 2022-11-11 21:09:37 发布