html5 canvas 消失,HTML5 Canvas橡皮擦工具没有透过白色

我有画布.我有涂料工具铅笔和橡皮擦.如何在不用白色覆盖(透支)的情况下擦除图纸.

我在后端保存图像后绘图.

@H_403_7@<?PHP

$images = scandir(ROOT_FS . FINISH_DRAW_PATH,1);

$imageData = $GLOBALS['HTTP_RAW_POST_DATA'];

$filteredData = substr($imageData,strpos($imageData,",") + 1);

$unencodedData = base64_decode($filteredData);

$fileName = "photo.png";

$fp = fopen(ROOT_FS . SAVE_DRAW_PATH . $fileName,'wb');

fwrite($fp,$unencodedData);

fclose($fp);

?>

使用Windows照片查看器打开并查看此结果：

额外上传照片：

@H_403_7@$("#upload_foto").click(function() {

var data = canvas.toDataURL('image/png');

var ajax = new XMLHttpRequest();

ajax.open('POST','backend.PHP',false);

ajax.setRequestHeader('Content-Type','application/upload');

ajax.send(data);

});

Upload

您使用合成创建橡皮擦的想法是个好主意.

destination-out将删除现有图纸,其中新图纸与那些现有图纸重叠.

@H_403_7@var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var lastX;

var lastY;

var strokeColor="red";

var strokeWidth=5;

var mouseX;

var mouseY;

var canvasOffset=$("#canvas").offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

var isMouseDown=false;

function handleMouseDown(e){

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

// Put your mousedown stuff here

lastX=mouseX;

lastY=mouseY;

isMouseDown=true;

}

function handleMouseUp(e){

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

// Put your mouseup stuff here

isMouseDown=false;

}

function handleMouSEOut(e){

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

// Put your mouSEOut stuff here

isMouseDown=false;

}

function handleMouseMove(e){

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

// Put your mousemove stuff here

if(isMouseDown){

ctx.beginPath();

if(mode=="pen"){

ctx.globalCompositeOperation="source-over";

ctx.moveTo(lastX,lastY);

ctx.lineTo(mouseX,mouseY);

ctx.stroke();

}else{

ctx.globalCompositeOperation="destination-out";

ctx.arc(lastX,lastY,8,Math.PI*2,false);

ctx.fill();

}

lastX=mouseX;

lastY=mouseY;

}

}

$("#canvas").mousedown(function(e){handleMouseDown(e);});

$("#canvas").mousemove(function(e){handleMouseMove(e);});

$("#canvas").mouseup(function(e){handleMouseUp(e);});

$("#canvas").mouSEOut(function(e){handleMouSEOut(e);});

var mode="pen";

$("#pen").click(function(){ mode="pen"; });

$("#eraser").click(function(){ mode="eraser"; });

@H_403_7@body{ background-color: ivory; }

canvas{border:1px solid red;}

@H_403_7@

Pen

Eraser