Question

我有一个绘图应用程序，其中包含一个灰度级背景图像的容器，还有另一个图像（相同但不是灰度）。
当我绘制我的图像时，我会擦除我绘制的位置或以灰度转动（以在背景中重现图像）。
我怎样才能做到这一点？
这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #wrapper {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
            background-image: url('elephant-nb-400.jpg');
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <canvas width="600" height="400"></canvas>
    </div>
    <script>
        window.onload = function() {
            var wrapper = document.querySelector("#wrapper");
            var canvas = document.querySelector("#wrapper canvas");
            var context = canvas.getContext("2d");
            var image = document.createElement("img");
            image.setAttribute("src", "elephant-400.jpg");
            image.onload = function() {
                context.drawImage(image, 0, 0, 600, 400);
            };

            var positionsX = new Array();
            var positionsY = new Array();
            var movements = new Array();
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            var isErasing; 

            canvas.addEventListener("mousedown", function(e) {
                 var mouseX = e.pageX - this.offsetLeft;
                 var mouseY = e.pageY - this.offsetTop;
                 isErasing = true;
                 addPositions(mouseX, mouseY);
                 draw();
            });

            canvas.addEventListener("mousemove", function(e) {
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                if(isErasing) {
                    addPositions(mouseX, mouseY, true);
                    draw();
                }
            });

            canvas.addEventListener("mouseup", function(e) {
                isErasing = false;
            });

            var addPositions = function(x, y, isMoving) {
                positionsX.push(x);
                positionsY.push(y);
                movements.push(isMoving);
            }

            var draw = function(){
                //context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

                for(var i=0; i < positionsX.length; i++) {  
                  context.beginPath();
                  if(movements[i] && i){

                   }else{

                   }
                   context.lineTo(positionsX[i], positionsY[i]);
                   context.closePath();
                   context.stroke();
                }
              }

        }


    </script>
</body>

Answer 1

我的问题解决了。您需要获取图像数据：var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
在函数draw（）中，您需要在context.putImageData(imageData, 0, 0, positionsX[i]-1, positionsY[i], 20, 20);和context.moveTo(positionsX[i-1], positionsY[i-1]);之后添加context.moveTo(positionsX[i]-1, positionsY[i]);

绘图应用程序：将像素转为灰度或删除它们

1 个答案: