首页canvas绘制五角星

canvas绘制五角星

时间: 2023-12-29 10:26:42 浏览: 113

以下是使用canvas绘制五角星的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘制五角星</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); function drawStar(cx, cy, spikes, outerRadius, innerRadius) { var rot = Math.PI / 2 * 3; var x = cx; var y = cy; var step = Math.PI / spikes; ctx.beginPath(); ctx.moveTo(cx, cy - outerRadius) for (i = 0; i < spikes; i++) { x = cx + Math.cos(rot) * outerRadius; y = cy + Math.sin(rot) * outerRadius; ctx.lineTo(x, y) rot += step x = cx + Math.cos(rot) * innerRadius; y = cy + Math.sin(rot) * innerRadius; ctx.lineTo(x, y) rot += step } ctx.lineTo(cx, cy - outerRadius) ctx.closePath(); ctx.lineWidth = 5; ctx.strokeStyle = 'red'; ctx.stroke(); ctx.fillStyle = 'red'; ctx.fill(); } drawStar(100, 100, 5, 50, 25); </script> </body> </html> ``` 这段代码使用了JavaScript和canvas组件来绘制一个五角星。通过调用`drawStar`函数，可以在指定的画布上绘制一个五角星。函数的参数包括五角星的中心点坐标、尖角的数量、外半径和内半径。在函数内部，使用数学运算来计算五角星的各个顶点的坐标，并使用`lineTo`方法连接这些点，最后使用`stroke`方法绘制轮廓线并使用`fill`方法填充颜色。

阅读全文