Question

我宣布下一个广场，这很容易，但现在我想做一个圆圈...

我怎么做？谢谢。

//Create Var
var squa = new Square(320, 380, 50, 50);

//Define the square
function Square(x, y, width, height) {
    "use strict";
    this.x = (x === null) ? 0 : x;
    this.y = (y === null) ? 0 : y;
    this.width = (width === null) ? 0 : width;
    this.height = (height === null) ? this.width : height;
}

//Draw the square as object
squa.fill(ctx);

Answer 1

你可以对Square所做的事情进行同样的讨论。唯一真正的区别是使用arc(x, y, r, startAngle, endAngle)方法。用它绘制圆圈，您可以将startAngle和endAngle定义为0和2pi。像这样：arc(x, y, r, 0, Math.PI*2)。要绘制圆形，首先需要调用ctx.beginPath();来表示您要绘制一些路径或圆弧。例如，这会在(100,100)处绘制一个半径为10的圆圈：

ctx.beginPath();
ctx.arc(100, 100, 10, 0, Math.PI*2);
ctx.fill(); // fill() is to fill in the circle, stroke() is for a empty circle.

因此，使用您在上面使用的相同样式的编码，以下是如何制作Circle的方法。正如你所看到的那样，它几乎以同样的方式完成。这是下面的代码段：

＆＃13;

var ctx = document.getElementById("canvas").getContext("2d");

//Create Var
var circ = new Circle(100, 100, 20);

//Define the circle
function Circle(x, y, r) {
    "use strict";
    this.x = (x === null) ? 0 : x;
    this.y = (y === null) ? 0 : y;
    this.r = (r === null) ? 0 : r;
    
    this.fill = function(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
        ctx.fill();
    }
}

//Draw the circle as object
circ.fill(ctx);

＆＃13;

canvas{ border: 1px solid black; }

＆＃13;

<canvas width=200 height=200 id="canvas"></canvas>

＆＃13;

Answer 2

可以使用弧（x，y，半径，起始位置 - 通常为零，最终位置 - 通常为三六十度）创建一个简单的圆。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(50, 50, 10, 0, Math.PI*2);
context.fillStyle = 'FFF000';
context.fill();
context.closePath();

<canvas id="myCanvas" width="100" height="100"></canvas>

将球作为对象绘制时，只需将其包裹在带参数的函数中 - x轴，y轴，半径和球的颜色

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//invoking the object
var cir = new circle(30, 30, 15, '#000FFF');

function circle(x, y, radius, color){
  context.beginPath();
  context.arc(x, y, radius, 0, Math.PI*2);
  context.fillStyle = color;
  context.fill();
  context.closePath();
}

canvas{
  background-color: #fff000;
}

<canvas id="myCanvas" width="100" height="100"></canvas>

在画布中绘制一个球作为对象

2 个答案: