首页在 canvas.html 文件中添加一个嵌套的 <canvas> 标签,并设置标签宽为 800px、高为 600px 添加 <script> 标签,先创建 draw() 函数,该函数有两个参数 x 和 y,表示五角星的起点坐标,在该函数中使用 moveTo() 方法

在 canvas.html 文件中添加一个嵌套的 <canvas> 标签,并设置标签宽为 800px、高为 600px 添加 <script> 标签,先创建 draw() 函数,该函数有两个参数 x 和 y,表示五角星的起点坐标,在该函数中使用 moveTo() 方法

时间: 2024-03-01 10:51:13 浏览: 72

来将画笔移动到起点，然后使用 lineTo() 方法连接五个点，形成五角星的轮廓，最后使用 closePath() 方法闭合路径并使用 stroke() 方法描边。代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); function draw(x, y) { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + 100, y + 50); ctx.lineTo(x + 150, y); ctx.lineTo(x + 200, y + 50); ctx.lineTo(x + 250, y); ctx.closePath(); ctx.stroke(); } draw(100, 100); </script> </body> </html> ``` 在该示例中，我们使用了 canvas.getContext("2d") 方法获取绘图上下文对象，并使用该对象的方法来绘制五角星的轮廓。在最后一行代码中，我们调用 draw() 函数，并传入起点坐标 (100, 100)。

阅读全文