首页canvas绘制圆，demo

canvas绘制圆，demo

时间: 2024-11-27 13:20:24 浏览: 12

Canvas是一个HTML5标签，用于在网页上进行动态绘图。如果你想在canvas上绘制一个圆形，可以使用`arc()`方法，这是一个创建圆弧的方法。下面是一个简单的JavaScript示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Draw Circle</title> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> // 获取canvas元素 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制圆 function drawCircle(x, y, radius, color) { ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI*2); // 参数：圆心x, 圆心y, 半径, 开始角度(0), 结束角度(2π) ctx.fillStyle = color; // 设置填充颜色 ctx.fill(); // 填充圆 ctx.strokeStyle = 'black'; // 设置描边颜色 ctx.stroke(); // 描边 } // 调用函数绘制圆，比如圆心在canvas中心，半径为50px，颜色为红色 drawCircle(canvas.width / 2, canvas.height / 2, 50, 'red'); </script> </body> </html> ``` 在这个例子中，我们首先获取到画布上下文，然后定义了一个`drawCircle`函数，接受圆心坐标、半径和颜色作为参数。通过`arc()`方法绘制圆形，并设置填充和描边样式。

阅读全文