首页编写完整代码，JS中canvas绘图绘制实心红色半圆形，边框为黑色

编写完整代码，JS中canvas绘图绘制实心红色半圆形，边框为黑色

时间: 2023-06-20 07:04:07 浏览: 49

以下是一个基本的实现： ```html <!DOCTYPE html> <html> <head> <title>Canvas Half Circle</title> </head> <body> <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 100; ctx.beginPath(); ctx.arc(centerX, centerY, radius, -(Math.PI / 2), Math.PI / 2); ctx.lineTo(centerX, centerY); ctx.closePath(); ctx.fillStyle = "red"; ctx.strokeStyle = "black"; ctx.fill(); ctx.stroke(); </script> </body> </html> ``` 此代码创建一个canvas元素，并使用JavaScript的canvas API在其上绘制一个红色实心半圆形，边框为黑色。具体来说，代码使用`getContext()`方法获取2D上下文，并在其中使用`arc()`方法创建半圆形。它还使用`fillStyle`属性设置填充颜色和`strokeStyle`属性设置边框颜色。