Javascript Canvas不显示图像

Question

我目前正在开发一个 Javascript Canvas 项目（以前从未使用过 Js 编码或使用过画布），并且需要一些关于在画布中心绘制带有边框的图像的帮助。

我目前有一个 Person.js，其中绘制了人的矩形和图像：

var Person = (function () {
function Person(pName, pImageUrl) {
    this.setId(Person.sTotalNodes++);
    this.setName(pName);
    this.mImage = new Image();
    this.setImageUrl(pImageUrl);
    this.mPartners = new Array();

}
Person.sTotalNodes = 0;
Person.prototype.getId = function () {
    return this.mId;
};
Person.prototype.setId = function (pId) {
    this.mId = pId;
};
Person.prototype.draw = function (context) {

    //draw rectangle
    var c = document.getElementById("canvas");
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    var context = c.getContext("2d");
    context.rect(0,0,160,210);
    context.fillStyle = '#0073E6';
    context.fill();
    context.stroke();
    //get image and draw
    context.drawImage(this.getImage(), 0, 0);

};
Person.prototype.setName = function (pName) {
    this.mName = pName;
};
Person.prototype.getName = function () {
    return this.mName;
};
Person.prototype.setImageUrl = function (pImageUrl) {
    this.mImageUrl = pImageUrl;
    this.mImage.src = pImageUrl;
};
Person.prototype.getImageUrl = function () {
    return this.mImageUrl;
};
Person.prototype.getImage = function () {
    /* when you first get this it will not return a proper image
        you need to use the getImageUrl function and then build a new image */
    return this.mImage;
};
Person.prototype.getPartner = function (pIndex) {
    return this.mPartners[pIndex];
};
Person.prototype.numPartners = function () {
    return this.mPartners.length;
};
Person.prototype.addPartner = function (pPartner) {
    this.mPartners.push(pPartner);
};

return Person;

})();

但是一旦我添加context.translate(canvas.width * 0.5, canvas.height * 0.5); 以便将原点放置在画布的中心，只有矩形绘制？我有什么任务吗？ （还尝试将 context.translate 放在我的 main.js 中，其中调用 topPerson.draw(context); 以从树中绘制第一个人。

main.js（我称之为要绘制树的第一人称）

// add the onLoad event listener to initialise our canvas
if(window.addEventListener) {
window.addEventListener('load', onLoad, true);
}

function onLoad() {
var canvas;
var context;
var exampleFamilyTrees;
var topPerson;

var previousMousePosition;

function initialise() {
    canvas = document.getElementById('canvas');
    if (!canvas) {
        alert('Error: Canvas element not found');
        return;
    }

    context = canvas.getContext('2d');
    if (!context) {
        alert('Error: Unable to get canvas context');
        return;
    }
    exampleFamilyTrees = new ExampleFamilyTrees();
    topPerson = exampleFamilyTrees.getFamilyTree(0);


}
function draw(){
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    topPerson.draw(context);

}

function update(){

}

function animationLoop(){
    update();
    draw();
    requestAnimationFrame(animationLoop);
}
initialise();
animationLoop();
}

Answer 1

你必须在context.rect之前放置translate