0

当试图在画布上运行多幅绘图时，我注意到如果时间错误，事情可能会变得一团糟。

即让画布通过间隔画出一条线；然后多次复制该（画线）并将每个人的笔触颜色设置为不同......最后，你会得到其他线条的笔触颜色等等......

有没有办法让多个绘图实例（context.ctx）不会干扰其他人？

下面的区间代码示例：

    it.ctx.strokeStyle = "rgba(200,200,0,.1)"
    it.ctx.fillStyle = "rgba(255,255,22,.01)";
    var p = i.p.split(",");

    var rp = setInterval(function(){
        if(cc>=20){
            clearInterval(rp);
            it.ctx.strokeRect( p[0],p[1],p[2],p[3] );
            return;
        }
        it.ctx.fillRect( p[0],p[1],p[2],p[3] );
        cc++;
    },30);
4

1 回答 1

2

如果在调用此间隔函数之间运行其他代码来修改strokeStyleand fillStyle，则每次在画布上绘制时都需要显式设置这些值：

var p = i.p.split(",");
var rp = setInterval(function(){
    it.ctx.save(); // Save the current canvas styles.

    it.ctx.strokeStyle = "rgba(200,200,0,.1)";
    it.ctx.fillStyle = "rgba(255,255,22,.01)";

    if(cc>=20){
        clearInterval(rp);
        it.ctx.strokeRect( p[0],p[1],p[2],p[3] );
    }
    else {
        it.ctx.fillRect( p[0],p[1],p[2],p[3] );
        cc++;
    }

    it.ctx.restore(); // Restore the original canvas styles.
},30);

如果您没有在间隔函数中设置strokeStyle和fillStyle，画布将使用外部“背景”代码建立的任何内容。

于 2012-04-23T22:18:54.873 回答