html5 canvas绘制带有额外数据的圆形变量

Question

所以我基本上试图创建一个座位表，用圆圈标记点，然后在鼠标悬停时显示一个工具提示，其中包含该人的名字、姓氏，也许还有一些其他信息。我可能会使用 Kinetic.JS 来支持区域/工具提示，因为我似乎最常遇到它的教程。

我想为每人创建 1 个变量，其中不仅包含命名信息，还包含有关圆圈的一些详细信息，这可能很简单，但我对 JS 总体来说是新手。这就是我提出的更多理论，因为它实际上似乎并不简单地工作：

Function seat(centerX, centerY, radius, fillStyle, firstName, lastName, id) {
    This.centerX=ctx.arc(centerX);
    This.centerY=ctx.arc(centerY);
    This.radius=ctx.arc(radius);
    This.fillStyle=ctx.fillStyle;
    This.firstName=firstName;
    This.lastName=lastName;
    This.id=id;
}
var johnSmith = new seat (100, 120, 10, #999, John, Smith, 123);

                var canvas = document.getElementById("seatingChart");
                var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(johnSmith);
    ctx.moveTo(…);
    ctx.arc(nextPerson);
    ect…

我知道为了使圆正常工作，我需要将弧信息的最后一部分放在 ctx. arc(.., .., .., 0, 2 * Math.PI, false); 我只是不确定它应该在哪里，所以我不必为每个变量重复它​​？

有人愿意帮助我以正确的方式进行设置吗？我目前正在阅读一本 JS 书，但似乎无法正确设置此设置..

谢谢

Answer 1

正如 jcubed 所说：“您无法将包含这些属性的对象传递给 arc。”

你可以做的是创建你自己的函数，例如：

context.fillPerson = function(p){
    this.fillStyle = p.fillStyle;
    this.arc(p.centerX,p.centerY,p.radius,0,2*Math.PI,false);
    this.fill();
}

如果你这样做，你也可以轻松地改变将来如何画一个人。

如果您只想更容易地绘制一般的圈子，您可以这样做：

context.circle = function(x,y,r){ this.arc(x,y,r,0,2*Math.PI,false); }

Answer 2

你不能像这样调用 javascript 中的函数。您必须使用逗号分隔的参数，例如 ctx.arc(centerX, centerY, radius,startingAngle,endingAngle, antiClockwise);。您不能将对象传递给包含这些属性的弧。

做：

ctx.beginPath();
ctx.fillStlye = johnSmith.fillStyle;
ctx.arc(johnSmith.centerX, johnSmith.centerY, johnSmith.radius, 0, 2 * Math.PI, false);
ctx.fill();

对每个人来说，就像在 for 循环或其他东西中一样。