Question

我正在创建一个mootools类并使用Mootools Canvas Library基本上只创建（现在）一个小方块，只要在另一个画布项目区域有一个click事件。想象一下photoshop笔工具和节点。

var Pentool = new Class({
    Implements: [Events, Options],
    initialize: function(canvasel) {

        CANVAS.init({
                canvasElement : canvasel,
                enableMouse : true
        });

        var _self = this;

        //add a layer
        var layer = CANVAS.layers.add( new Layer({
                id : 'myLayer'
        }));

        var area = new CanvasItem({
            id: 'area_',
            w: 360,
            h: 500,
            interactive: true,

            events: {
                onDraw: function(ctx) {
                    ctx.fillStyle = 'rgba(255,255,255,0.3)';
                    ctx.fillRect(0, 0, this.w, this.h);
                    this.setDims(0, 0, this.w, this.h)
                },
                onClick: function(x, y) {
                    _self.addNode(layer, x, y);
                }
            }

        })

        layer.add(area);

        CANVAS.draw();


    },
    addNode: function(layer, x, y) {
        var node = new CanvasItem({
            id: 'node_',
            x: x,
            y: y,
            fillStyle : 'rgba(255,0,0,1)',
            events: {
                onDraw: function(ctx) {
                    ctx.fillStyle = this.fillStyle;
                    ctx.fillRect(this.x, this.y, 12, 12);
                }
            }

        });

        layer.add(node);        
        CANVAS.draw();

    }
})

现在我已经尝试了一切来阻止这一点，但每当我点击不止一次时，不透明度就会上升（参见不透明度填充）。我如何阻止这种情况发生？我想，我需要正确地“清除”画布。

Answer 1

我自己对画布很新，但发现ctx.beginPath()会给你一个“新的开始”，但是你还需要再次moveTo()，并绘制所有多边形和线条试。

ctx.fillStyle="rgba(255,255,255,0.5)";
ctx.fillRect(10,10,50,50);
ctx.beginPath();
ctx.fillRect(70,10,50,50);

这将绘制同样不透明的盒子。

有关“清算”的建议吗？帆布

1 个答案: