[英]How to draw a circle in HTML5 Canvas using JavaScript?
如何使用最少的 JavaScript 代码在 HTML5 Canvas 中绘制一个简单的圆圈?
Here is how to draw a circle using JavaScript in HTML5:以下是在 HTML5 中使用 JavaScript 绘制圆的方法:
const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.lineWidth = 5; context.strokeStyle = '#003300'; context.stroke();
body { margin: 0px; padding: 0px; }
<canvas id="myCanvas" width="578" height="200"></canvas>
I took the answers above and turned them into a useful function:我把上面的答案变成了一个有用的函数:
function drawCircle(ctx, x, y, radius, fill, stroke, strokeWidth) {
ctx.beginPath()
ctx.arc(x, y, radius, 0, 2 * Math.PI, false)
if (fill) {
ctx.fillStyle = fill
ctx.fill()
}
if (stroke) {
ctx.lineWidth = strokeWidth
ctx.strokeStyle = stroke
ctx.stroke()
}
}
Then, use it like so to draw a black circle with a red stroke (width 2) at coordinates 50,50, with radius 25:然后,像这样使用它在坐标 50,50 处绘制一个带有红色笔划(宽度 2)的黑色圆圈,半径为 25:
let ctx = canvas.getContext('2d')
drawCircle(ctx, 50, 50, 25, 'black', 'red', 2)
Creating shapes is easier using new Canvas Path2D , which uses the same canvas drawing API, and allow separation of the declaration from drawing itself, and reuse of complex geometry:使用新的 Canvas Path2D可以更轻松地创建形状,它使用相同的画布绘图 API,并允许将声明与绘图本身分离,并重用复杂的几何图形:
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; let circle = new Path2D(); // <<< Declaration circle.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'blue'; context.fill(circle); // <<< pass circle to context context.lineWidth = 10; context.strokeStyle = '#000066'; context.stroke(circle); // <<< pass circle here too
body { margin: 0px; padding: 0px; }
<canvas id="myCanvas" width="578" height="200"></canvas>
First of all, you need to get the canvas context:-首先,您需要获取画布上下文:-
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
Now let us define the position and radius:-现在让我们定义位置和半径:-
const X = canvas.width / 2;
const Y = canvas.height / 2;
const radius = 45;
Now let us set the color and line width:-现在让我们设置颜色和线宽:-
ctx.lineWidth = 3;
ctx.strokeStyle = '#FF0000';
Now, to draw the circle, we have to use the arc method and set the angle to 2 X π现在,要绘制圆,我们必须使用圆弧方法并将角度设置为 2 X π
ctx.beginPath();
ctx.arc(X, Y, radius, 0, 2 * Math.PI, false);
ctx.stroke();
Base on Sam's answer, I combined all the parameters into one object so that it is more readable when using the function.根据 Sam 的回答,我将所有参数组合到一个对象中,以便在使用该函数时更具可读性。
function drawCircle(obj) {
obj.ctx.beginPath();
obj.ctx.arc(obj.x, obj.y, obj.radius, 0, 2 * Math.PI, false);
if (obj.fill) {
obj.ctx.fillStyle = obj.fill;
obj.ctx.fill();
}
if (obj.stroke) {
obj.ctx.lineWidth = obj.strokeWidth;
obj.ctx.strokeStype = obj.stroke;
obj.ctx.stroke();
}
}
To use:使用:
let ctx = canvas.getContext('2d');
drawCircle({
ctx: ctx,
x: 100,
y: 100,
radius: 20,
fill: "green",
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.