javascript画布擦除工具不做任何事情答案

【问题标题】：javascript canvas erasing tool doesnt do anythingjavascript画布擦除工具不做任何事情
【发布时间】：2023-04-05 05:42:01
【问题描述】：

http://joeybabcock.me/tests/php/5.php 我有上面基于phpacademy的例子的绘图应用程序，如果你继续下去，你会看到最后是黑色的，它应该是一个擦除工具，但我无法让它工作，我有以下：

 var swetch = document.createElement('div');    
 swetch.className = 'swetch';
 swetch.style.backgroundColor = "rgba(0,0,0,0)";
 swetch.addEventListener('click', setEraser);
 document.getElementById('colors').appendChild(swetch);

还有：

function setEraser(){
context.fillStyle = "rgba(0,0,0,0)";
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,0)";
swetch.className += ' active';
var active = document.getElementsByClassName('active')[0];
if(active){
    active.className = 'swatch';
}
}

我尝试创建一个简单的样例，它具有 css 属性“透明”，还有一个具有“rgba(0, 0, 0, 0)”，但都不起作用。

我已经尝试了 stackoverflow 和 google 上的所有答案，如果 globalCompositeOperation 有很多不同的方法。

【问题讨论】：

context 在哪里声明和初始化？
抱歉，drawer3.js，var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
@joeybab3 - 在画布中，白色画笔是橡皮擦。通过绘制透明它什么都不做（因为透明+任何东西仍然没有改变）
我将如何真正删除它？如 url 所示，这是一个测试，我打算在它后面有内容。

标签： javascript php canvas

【解决方案1】：

这是一个简单的示例，它使用“destination-out”合成来擦除前景填充以显示背景图像。

destination-out compositing 将在绘制新笔划的地方“擦除”现有内容。

在这个例子中：

背景画布有图像
前景画布与背景画布完全重叠
前景画布最初填充了不透明的颜色
globalCompositeOperation="destination-out" 用于“擦除”不透明颜色以显示下图的部分内容。

演示：http://jsfiddle.net/m1erickson/fjTLF/

代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{
        position:relative;
        width:300px;
        height:300px;
    }
    #canvasTop,#canvasBottom{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvasTop{
        border:1px solid red;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvasTop");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvasBottom");
    var ctx2=canvas2.getContext("2d");

    var canvasOffset=$("#canvasTop").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    var img=new Image();
    img.onload=function(){
        canvas.width=canvas2.width=img.width;
        canvas.height=canvas2.height=img.height;
        ctx.lineWidth=10;
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        ctx.fillStyle="skyblue";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx2.drawImage(img,0,0);
    };
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      ctx.save();
      ctx.globalCompositeOperation="destination-out";
      ctx.beginPath();
      ctx.moveTo(startX,startY);
      ctx.lineTo(mouseX,mouseY);
      ctx.stroke();
      startX=mouseX;
      startY=mouseY;
    }

    $("#canvasTop").mousedown(function(e){handleMouseDown(e);});
    $("#canvasTop").mousemove(function(e){handleMouseMove(e);});
    $("#canvasTop").mouseup(function(e){handleMouseUp(e);});
    $("#canvasTop").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <div id="wrapper">
        <canvas id="canvasBottom" width=300 height=300></canvas>
        <canvas id="canvasTop" width=300 height=300></canvas>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

如果你有白色背景，你可以很容易地使用类似的东西

function eraser(){
      context.fillStyle = "rgb(255, 255, 255)";
      context.strokeStyle = "rgb(255, 255, 255)";
      context.fontStyle = "rgb(255, 255, 255)";
    }

你可以有一个带有橡皮擦工具或其他东西的 div，然后使用 onclick="" 函数

<div id="eraser" class="eraser" onClick="eraser()">

如果您有背景图片，您可以随时使用它来擦除背景图片。

【讨论】：