首页html5用canvas画一个实心圆

html5用canvas画一个实心圆

时间: 2024-09-11 08:02:18 浏览: 46

html5使用canvas画空心圆与实心圆

这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题，非常简单。 <canvas id=canvas width=500 height=500 xss=removed></canvas> 复制代码代码如下: var canvas=document.getElementById(“canvas”); var cxt=canvas.getContext(“2d”); //画一个空心圆 cxt.beginPath(); cxt.arc(200,200,50,0,360,false);

HTML5的Canvas API允许开发者在网页上绘制图形，包括实心圆形。以下是一个简单的例子，展示如何使用JavaScript和Canvas API创建一个实心圆： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 实心圆</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> // 获取canvas元素并获取2D渲染上下文 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 定义圆心坐标和半径 var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 50; // 绘制实心圆 ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); // 从0到2π，即完整圆周角度 ctx.fillStyle = 'blue'; // 设置填充颜色 ctx.fill(); // 填充路径 ctx.closePath(); // 关闭路径 </script> </body> </html> ``` 在这个示例中，我们首先设置了圆的中心位置和半径，然后通过`arc()`函数开始路径，并指定圆的起点、终点和圆弧的角度。接着设置填充颜色为蓝色，最后调用`fill()`方法将路径内的区域填充颜色，形成实心圆。

阅读全文