0

我使用 HTML5 画布创建了一个绘图应用程序。我确实使用背景图片。但是用橡皮擦。当我删除它时，下一个图像也被删除。谁能帮我？

这个 HTML ： 

<form>
    <div>
        <label for="pencil">Pencil</label>
        <input id="pencil" type="radio" name="tool" value="pencil" checked>
    </div>

    <div>
        <label for="eraser">Eraser</label>
        <input id="eraser" type="radio" name="tool" value="eraser">
    </div>
</form>

<div id="sketch">
    <canvas id="paint"></canvas>
</div>

和 Javascript：

    (function() {

    var canvas = document.querySelector('#paint');
    var ctx = canvas.getContext('2d');

    var sketch = document.querySelector('#sketch');
    var sketch_style = getComputedStyle(sketch);
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height'));


    // draw image
    var img = new Image();
    img.src = 'http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg';
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);


    // Determine Tool
    var tool = 'pencil';
    document.querySelector('#pencil').onchange = function() {
        if (this.checked)
            tool = 'pencil';

        // Show Tmp Canvas
        tmp_canvas.style.display = 'block';
    };
    document.querySelector('#eraser').onchange = function() {
        if (this.checked)
            tool = 'eraser';

        // Hide Tmp Canvas
        tmp_canvas.style.display = 'none';
    };


    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_ctx = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;

    sketch.appendChild(tmp_canvas);

    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    // Pencil Points
    var ppts = [];

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function(e) {
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
    }, false);

    canvas.addEventListener('mousemove', function(e) {
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
    }, false);


    /* Drawing on Paint App */
    tmp_ctx.lineWidth = 5;
    tmp_ctx.lineJoin = 'round';
    tmp_ctx.lineCap = 'round';
    tmp_ctx.strokeStyle = 'blue';
    tmp_ctx.fillStyle = 'blue';

    tmp_canvas.addEventListener('mousedown', function(e) {
        tmp_canvas.addEventListener('mousemove', onPaint, false);

        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

        ppts.push({x: mouse.x, y: mouse.y});

        onPaint();
    }, false);

    tmp_canvas.addEventListener('mouseup', function() {
        tmp_canvas.removeEventListener('mousemove', onPaint, false);

        ctx.globalCompositeOperation = 'source-over';

        // Writing down to real canvas now
        ctx.drawImage(tmp_canvas, 0, 0);
        // Clearing tmp canvas
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        // Emptying up Pencil Points
        ppts = [];
    }, false);

    var onPaint = function() {

        // Saving all the points in an array
        ppts.push({x: mouse.x, y: mouse.y});

        if (ppts.length < 3) {
            var b = ppts[0];
            tmp_ctx.beginPath();
            //ctx.moveTo(b.x, b.y);
            //ctx.lineTo(b.x+50, b.y+50);
            tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
            tmp_ctx.fill();
            tmp_ctx.closePath();

            return;
        }

        // Tmp canvas is always cleared up before drawing.
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

        tmp_ctx.beginPath();
        tmp_ctx.moveTo(ppts[0].x, ppts[0].y);

        for (var i = 1; i < ppts.length - 2; i++) {
            var c = (ppts[i].x + ppts[i + 1].x) / 2;
            var d = (ppts[i].y + ppts[i + 1].y) / 2;

            tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
        }

        // For the last 2 points
        tmp_ctx.quadraticCurveTo(
            ppts[i].x,
            ppts[i].y,
            ppts[i + 1].x,
            ppts[i + 1].y
        );
        tmp_ctx.stroke();

    };


    canvas.addEventListener('mousedown', function(e) {
        canvas.addEventListener('mousemove', onErase, false);

        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;

        ppts.push({x: mouse.x, y: mouse.y});

        onErase();
    }, false);

    canvas.addEventListener('mouseup', function() {
        canvas.removeEventListener('mousemove', onErase, false);

        // Emptying up Pencil Points
        ppts = [];
    }, false);

    var onErase = function() {

        // Saving all the points in an array
        ppts.push({x: mouse.x, y: mouse.y});

        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0,0,0,1)';
        ctx.strokeStyle = 'rgba(0,0,0,1)';
        ctx.lineWidth = 5;

        if (ppts.length < 3) {
            var b = ppts[0];
            ctx.beginPath();
            //ctx.moveTo(b.x, b.y);
            //ctx.lineTo(b.x+50, b.y+50);
            ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0);
            ctx.fill();
            ctx.closePath();

            return;
        }

        // Tmp canvas is always cleared up before drawing.
        // ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.moveTo(ppts[0].x, ppts[0].y);

        for (var i = 1; i < ppts.length - 2; i++) {
            var c = (ppts[i].x + ppts[i + 1].x) / 2;
            var d = (ppts[i].y + ppts[i + 1].y) / 2;

            ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
        }

        // For the last 2 points
        ctx.quadraticCurveTo(
            ppts[i].x,
            ppts[i].y,
            ppts[i + 1].x,
            ppts[i + 1].y
        );
        ctx.stroke();

    };

}());

链接演示： 演示

4

2 回答 2

1

如果您不希望删除背景图像，请将图像设置为容器 div (#sketch) 的背景，而不是在画布本身上绘制它。

// create a url string of your background image

bkImageURL="url(http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg)";

// set the background-image of your container div to that url

sketch.style.backgroundImage = bkImageURL;
于 2013-10-19T17:48:19.350 回答
0

  1. 创建两个具有不同 ID 的画布元素。对于此示例，我们将第一个画布（或底层）称为“背景”，将第二个画布（或顶层）称为“画板”：

  2. 使用 CSS 将一个直接放置在另一个之上。请记住指定 z 值并使“画板”元素具有更高的值。如果您在完成此步骤时需要帮助，可以搜索 StackOverflow。

  3. 将背景图像绘制到“背景”画布上。这是一些示例代码：

    // 指定背景画布元素 bgCanvas = document.getElementbyId('background'); // 指定画布上下文 ctx = bgCanvas.getContext('2d');

    // 创建新的背景图像 var bgImg = new Image();

    // 在背景画布上绘制背景图片 bgImg.onload = function () { //绘制背景图片 ctx.drawImage(bgImg, 0, 0); } bgImg.src = './path/to/image/file';

  4. 使用“画板”画布进行绘制/擦除功能。

于 2020-06-05T22:22:38.310 回答