我修改了这个包含这些Point对象的自定义画布构造函数的动画JS脚本http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js：
function Point(x, y, z, size, color, name, ico, isPerson) {
this.img = new Image();
this.ico = ico;
this.username = name;
this.curPos = new Vector(x, y, z);
this.color = color;
this.friction = document.Friction;
this.rotationForce = 0;
this.springStrength = 0.1; //0.1
this.originalPos = new Vector(x, y, z);
this.radius = size;
this.size = size;
this.targetPos = new Vector(x, y, z);
this.velocity = new Vector(0.0, 0.0, 0.0);
this.checkClick = function () {
//console.log('HOVER', mousePt);
var dox2 = this.originalPos.x - mousePt[0];
var doy2 = this.originalPos.y - mousePt[1];
var dd2 = (dox2 * dox2) + (doy2 * doy2);
var d2 = Math.sqrt(dd2); //DISTANCE SKYLAR
//console.log(d2);
if(d2 < this.radius)
{
//console.log('CLICKED ME', this.username);
showOptions();
}
}
this.showBox = function () {
ctx.fillStyle = "#000000";
ctx.font = '4px serif';
ctx.fillText('Hello world', 0, 0);
console.log('hidddd');
}
this.update = function () { //THIS IS CALLED TO SHAKE
if(this.isPerson && mousePt) //PERSON DIST
{
var dx = this.targetPos.x - this.curPos.x;
var dy = this.targetPos.y - this.curPos.y;
// Orthogonal vector is [-dy,dx]
var ax = dx * this.springStrength - this.rotationForce * dy;
var ay = dy * this.springStrength + this.rotationForce * dx;
this.velocity.x += ax;
this.velocity.x *= this.friction;
this.curPos.x += this.velocity.x;
this.velocity.y += ay;
this.velocity.y *= this.friction;
this.curPos.y += this.velocity.y;
var dox = this.originalPos.x - this.curPos.x;
var doy = this.originalPos.y - this.curPos.y;
var dd = (dox * dox) + (doy * doy);
var d = Math.sqrt(dd); //DISTANCE SKYLAR
this.targetPos.z = d / 100 + 1;
var dz = this.targetPos.z - this.curPos.z;
var az = dz * this.springStrength;
this.velocity.z += az;
this.velocity.z *= this.friction;
this.curPos.z += this.velocity.z;
this.radius = this.size * this.curPos.z;
var dox2 = this.originalPos.x - mousePt[0];
var doy2 = this.originalPos.y - mousePt[1];
var dd2 = (dox2 * dox2) + (doy2 * doy2);
var d2 = Math.sqrt(dd2); //DISTANCE SKYLAR
//console.log(d2);
if(d2 < this.radius)
{
showPersonStats(this.username, this.originalPos.x, this.originalPos.y);//maybe pass self thru here?
this.showBox();
}
} else {
var dx = this.targetPos.x - this.curPos.x;
var dy = this.targetPos.y - this.curPos.y;
// Orthogonal vector is [-dy,dx]
var ax = dx * this.springStrength - this.rotationForce * dy;
var ay = dy * this.springStrength + this.rotationForce * dx;
this.velocity.x += ax;
this.velocity.x *= this.friction;
this.curPos.x += this.velocity.x;
this.velocity.y += ay;
this.velocity.y *= this.friction;
this.curPos.y += this.velocity.y;
var dox = this.originalPos.x - this.curPos.x;
var doy = this.originalPos.y - this.curPos.y;
var dd = (dox * dox) + (doy * doy);
var d = Math.sqrt(dd); //DISTANCE SKYLAR
this.targetPos.z = d / 100 + 1;
var dz = this.targetPos.z - this.curPos.z;
var az = dz * this.springStrength;
this.velocity.z += az;
this.velocity.z *= this.friction;
this.curPos.z += this.velocity.z;
this.radius = this.size * this.curPos.z;
}
if (this.radius < 1) {
this.radius = 1;
} else if (this.radius > 120) //max
{
this.radius = 120;
}
};
this.draw = function (bubbleShape, dx, dy) {
ctx.fillStyle = this.color;
if(this.isPerson) //people
{
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.drawImage(this.img, this.originalPos.x-this.radius, this.originalPos.y-this.radius, this.radius, this.radius);
this.img.src = '../resources/ico2.png';
//this.img.src = this.ico;
}
if (bubbleShape == "square") {
ctx.beginPath();
ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);
} else if (!this.isPerson){ //THIS ------------
ctx.beginPath();
ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
ctx.fill();
}
};
}
（我为我正在创建的项目修改了它。）
我的问题是，成功地在这些静态点上附加/绘制图像我现在需要在CENTER或这些点附近用fillText（）绘制文本。我需要画点，以便文字画上点。
我很难理解用于填充文本的坐标系 - 如果我打印点本身的坐标，我会得到（200,300）听起来正确。
然后使用完全相同大小的单独画布，如果我像这样在200,300处绘制文本：
var canvas = document.getElementById('myCanvas2');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#000000";
ctx.font = '4px serif';
ctx.fillText('Hello world', 200, 300);
我在屏幕底部看到文字（模糊，难以辨认）和WAY ..
我不知道这里发生了什么 - 触发showBox（）函数，即使func被调用，也没有任何文本可见。
我在这里做错了什么？