Question

我有一个html5画布，您可以在其中删除图像顶部的模糊。我想用另一张图片替换模糊。我希望最终结果是一旦你擦除顶部图像，底部图像将出现在它下面。我一直在使用easeljs演示作为模板。

http://www.createjs.com/#!/EaselJS/demos/alphamask

我觉得我需要编辑的是在html页面脚本中，但它可能比那更深。

HTML

<canvas id="testCanvas" width="960" height="400"></canvas>

的JavaScript

var stage;
var isDrawing;
var drawingCanvas;
var oldPt;
var oldMidPt;
var displayCanvas;
var image;
var bitmap;
var maskFilter;
var cursor;
var text;
var blur;

function init() {
    if (window.top != window) {
        document.getElementById("header").style.display = "none";
    }

    document.getElementById("loader").className = "loader";

    image = new Image();
    image.onload = handleComplete;
    image.src = "images/summer.jpg";

    stage = new createjs.Stage("testCanvas");
    text = new createjs.Text("Loading...", "20px Arial", "#999999");
            text.set({x:stage.canvas.width/2, y:stage.canvas.height-80});
    text.textAlign = "center";
}

function handleComplete() {
    document.getElementById("loader").className = "";
    createjs.Touch.enable(stage);
    stage.enableMouseOver();

    stage.addEventListener("stagemousedown", handleMouseDown);
    stage.addEventListener("stagemouseup", handleMouseUp);
    stage.addEventListener("stagemousemove", handleMouseMove);
    drawingCanvas = new createjs.Shape();
    bitmap = new createjs.Bitmap(image);

    blur = new createjs.Bitmap(image);
    blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
    blur.cache(0,0,960,400);
    blur.alpha = .5;

    text.text = "Click and Drag to Reveal the Image.";

    stage.addChild(blur, text, bitmap);
    updateCacheImage(false);

    cursor = new createjs.Shape(new     createjs.Graphics().beginFill("#FFFFFF").drawCircle(0,0,20));
    cursor.cursor = "pointer";

    stage.addChild(cursor);
}

function handleMouseDown(event) {
    oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
    oldMidPt = oldPt;

    isDrawing = true;
}

function handleMouseMove(event) {
    cursor.x = stage.mouseX;
    cursor.y = stage.mouseY;

    if (!isDrawing) {
        stage.update();
        return;
    }

    var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

            drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
                .beginStroke("rgba(0,0,0,0.15)")
                .moveTo(midPoint.x, midPoint.y)
                .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

    oldPt.x = stage.mouseX;
    oldPt.y = stage.mouseY;

    oldMidPt.x = midPoint.x;
    oldMidPt.y = midPoint.y;

    updateCacheImage(true);

}

function handleMouseUp(event) {
    updateCacheImage(true);
    isDrawing = false;
}

function updateCacheImage(update) {
    if (update) {
        drawingCanvas.updateCache(0, 0, image.width, image.height);
    } else {
        drawingCanvas.cache(0, 0, image.width, image.height);
    }

    maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);

    bitmap.filters = [maskFilter];
    if (update) {
        bitmap.updateCache(0, 0, image.width, image.height);
    } else {
        bitmap.cache(0, 0, image.width, image.height);
    }

    stage.update();
}

Answer 1

一种常见的，但有点笨拙的方式是快速重新调整画布大小。因此，更改<canvas>元素width和height属性。这将擦除画布中的所有内容。

完成后，将其重置为您想要的状态，然后重新绘制底部图像。

正如我所说，这种方法有点粗略，但确实可以完成工作。

Answer 2

如果您只是想替换模糊图像，则必须更改以下部分：

在加载第一张图片后添加：

image.src = "images/summer.jpg";
// add new part
image2 = new Image();
image2.onload = handleComplete;
image2.src = "images/your_newImage.jpg";

在handleComplete()中，您现在等待加载2张图片，因此请添加以下内容：

function handleComplete() {
    loaded++; // and initialize this variable in the very top with: var loaded = 0;
    if ( window.loaded < 2 ) return;
    //... other stull

最后你改变了以下几行：

// old
blur = new createjs.Bitmap(image);
blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
blur.cache(0,0,960,400);
blur.alpha = .5;

// new
blur = new createjs.Bitmap(image2);

现在应该用你想要的图像替换模糊的图像，这不是最好的方法，但它应该让你到那里。如果你打算做更多“更深层次”的东西，我建议你从一些教程开始;）

如何擦除html5画布上的图像

2 个答案: