html5 画布 擦除,如何擦除html5画布上的图像

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

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

HTML

的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();

}