首页用canvas使用for循环画一个五角星

用canvas使用for循环画一个五角星

时间: 2023-07-04 08:30:22 浏览: 109

好的，以下是用canvas使用for循环画一个五角星的代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 五角星</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> let canvas = document.getElementById("myCanvas"); let ctx = canvas.getContext("2d"); // 设置五角星的中心点坐标和半径 let x = 200; let y = 200; let r = 100; // 计算五角星的五个顶点坐标 let points = []; for (let i = 0; i < 5; i++) { let point = {}; // 外圆顶点 point.x = x + r * Math.sin((i * 72 + 36) * Math.PI / 180); point.y = y - r * Math.cos((i * 72 + 36) * Math.PI / 180); points.push(point); // 内圆顶点 point = {}; point.x = x + r / 2 * Math.sin((i * 72 + 54) * Math.PI / 180); point.y = y - r / 2 * Math.cos((i * 72 + 54) * Math.PI / 180); points.push(point); } // 画五角星 ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.closePath(); ctx.stroke(); </script> </body> </html> ``` 这段代码中，我首先获取了canvas的上下文对象ctx，然后设置了五角星的中心点坐标和半径。接着，我使用for循环计算了五角星的五个顶点坐标，分别是外圆和内圆的顶点。最后，我使用moveTo和lineTo方法画出五角星的轮廓，并调用closePath方法将路径闭合起来，最后使用stroke方法将路径绘制出来。

阅读全文