Question

当我试图在画布上运行多个绘图时，我注意到错误的时机可能会搞砸了。

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

有没有办法让多个绘图实例（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);

Answer 1

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

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，则画布将使用外部＆＃34;背景＆＃34;代码已经建立。

html5 canvas - 多个绘图实例

1 个答案: