我有画布.我有涂料工具铅笔和橡皮擦.如何在不用白色覆盖(透支)的情况下擦除图纸.
这是我的代码橡皮擦用白色绘图：
http://jsfiddle.net/66z12xb0/
我在后端保存图像后绘图.
<?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照片查看器打开并查看此结果：
额外上传照片：
$("#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);
});
<button type='button' id='upload_foto'>Upload</button>
解决方法
您使用合成创建橡皮擦的想法是个好主意.
destination-out将删除现有图纸,其中新图纸与那些现有图纸重叠.
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"; });
body{ background-color: ivory; }
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <canvas id="canvas" width=300 height=300></canvas></br> <button id="pen">Pen</button> <button id="eraser">Eraser</button>