话不多说直接上代码,复制粘贴直接用,然后自己提取到自己项目
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas Drawing Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="100"></canvas>
<script src="script.js"></script>
</body>
</html>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 星星数据
var hoollowStarData = [
{
isfill: true,
cx: 50,
cy: 50,
spikes: 5,
outerRadius: 40,
innerRadius: 20,
},
{
isfill: true,
cx: 150,
cy: 50,
spikes: 5,
outerRadius: 40,
innerRadius: 20,
},
{
isfill: true,
cx: 250,
cy: 50,
spikes: 5,
outerRadius: 40,
innerRadius: 20,
},
{
isfill: false,
cx: 350,
cy: 50,
spikes: 5,
outerRadius: 40,
innerRadius: 20,
},
{
isfill: false,
cx: 450,
cy: 50,
spikes: 5,
outerRadius: 40,
innerRadius: 20,
},
];
function drawHollowStar(cx, cy, spikes, outerRadius, innerRadius, isFill) {
var rot = (Math.PI / 2) * 3;
var x = cx;
var y = cy;
var step = Math.PI / spikes;
context.beginPath();
context.moveTo(cx, cy - outerRadius);
for (i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
context.lineTo(x, y);
rot += step;
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
context.lineTo(x, y);
rot += step;
}
context.lineTo(cx, cy - outerRadius);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red";
if (isFill) {
context.fillStyle = "red";
context.fill();
}
context.stroke();
}
// drawHollowStar(50, 50, 5, 40, 20,ture);
// 中心点(50,50),5个角,外半径40,内半径20, true是否填充内部(点亮当前星星)
hoollowStarData.map((item) => {
drawHollowStar(
item.cx,
item.cy,
item.spikes,
item.outerRadius,
item.innerRadius,
item.isfill
);
});
</script>