Canvas Animation Kit 实验... ...如何清除画布？

Posted 2023-03-05

【中文标题】Canvas Animation Kit 实验... ...如何清除画布？

【英文标题】：Canvas Animation Kit Experiment... ...how to clear the canvas?

【发布时间】：2010-11-27 21:43:59

【问题描述】：

我可以制作一个 obj 来使用画布进行如下绘制：

MyObj.myDiv = new Canvas($("effectDiv"), Setting.width,  Setting.height);

然后，我用它在画布上绘制一个矩形：

    var c =  new Rectangle(80, 80,
        
            fill: [220, 40, 90]
        
    );
    var move = new Timeline;
    move.addKeyframe(0,
        
            x: 0,
            y: 0
        
    );
    c.addTimeline(move);
    MyObj.myDiv.append(c);

但是画完矩形后，我想清空画布，但是不知道用什么方法，怎么做... ...

哦……还有一件事： 这是蛋糕的网站： Link

【参考方案1】：

清除画布：

canvas.clear = true; // makes the canvas clear itself on every frame
canvas.fill = somecolor; // fills the canvas with some color on every frame
// with canvas.clear = false and low-opacity fill, fancy motion blur effect

Removing the rectangle from the canvas:
rectangle.removeSelf();
or
canvas.removeChild(rectangle);

【参考方案2】：

你可以试试这个方法：

MyObj.myDiv.clearRect(0, 0, canvas.width, canvas.height);

这会有效地将整个画布以背景色着色。

【参考方案3】：

最简单的方法是：

MyObj.myDiv.width = MyObj.myDiv.width;

【讨论】：

请注意，尽管Dive Into html5 声称这对 Safari 来说并不完美。

【参考方案4】：

我发现调整画布大小就像魔法一样，即使你并没有真正改变大小：

canvas.width = canvas.width

【讨论】：

请注意，尽管Dive Into HTML5 声称这对 Safari 来说并不完美。