4

我试图绘制一个矩形，将其擦除并在画布中重新绘制另一个矩形。
这三个操作的结果是有两个矩形。

html 5 api javascript： http: //pastebin.com/Qgf38C7m 

function Oggetto(idname,nome,posizione_x,posizione_y,width,height,doption){
        this.nome                       =       nome            ;      
        this.posizione_x        =       posizione_x     ;
        this.posizione_y        =       posizione_y     ;
        this.width                      =       width           ;
        this.height                     =       height          ;
        this.doption            =       doption         ;
        this.idname                     =       idname          ;
        console.log(this.idname);
        this.context            =       document.getElementById(idname).getContext("2d");      
}
Oggetto.prototype.draw = function () {
};
Oggetto.prototype.clear = function () {
};



function Entita(idname,nome,posizione_x,posizione_y,width,height,doption){
        Oggetto.call(this,idname,nome,posizione_x,posizione_y,width,height,doption);
}
Entita.prototype.draw = function (){
        this.context.rect(this.posizione_x,this.posizione_y,this.width,this.height);
        this.context.stroke();
};
Entita.prototype.clear = function () {
        // this.context.clearRect(this.posizione_x, this.posizione_y, this.width, this.height);
     //Richiamo il metodo per la creazione di un rettangolo con background
     this.context.clearRect(this.posizione_x-4, this.posizione_y-4, this.width+10, this.height+10);

};
Entita.prototype.enlarge = function (w,h) {
         this.clear();
         this.width             =       w;
         this.height    =       h;
         this.draw();
};
Entita.prototype =  new  Oggetto();

调用它的javascript代码：

 e =new Entita("ke","pio",10,10,100,100,"prova");   
 e.draw();
 e.enlarge(400,200);

结果：
http://postimg.org/image/vpgg20nyt/

4

1 回答 1

3

由于您使用当前工作路径来绘制矩形，因此您需要使用 重置当前工作路径beginPath。否则，您只是在当前工作路径中添加新的子路径，这就是使用strokein绘制两个矩形的原因Entitia.draw。

您总是strokeRect可以避免与当前工作路径的填充/抚摸产生任何混淆，但如果您打算在将来添加任意形状，最好的办法是简单地将行添加this.context.beginPath()为Entitia.draw.

Entita.prototype.draw = function () {
    this.context.beginPath();
    //Other statements for defining
    //current working path and stroking/filling
    //it
};

工作小提琴。

于 2013-06-13T06:59:09.967 回答