Image 我有一个画板，并希望覆盖一个图像，这只是一个轮廓（所以图像是透明的，除了一些黑线）。

我有它，这样你就可以在图像下画画了，但是你必须开始在图像边界外画画，然后在图像下移动。所以你不能从图像开始。我该如何解决这个问题

我的html只是：

<canvas id="canvas"></canvas>

<img id="html5" src="http://i.imgur.com/Wpx3Vum.png" style="position:absolute;left:100px;top:15px;" />

---

您可以使用两个画布元素：

• 放置两个画布元素
• 您想叠加在顶部画布上
• 添加到顶部画布
• 绘制时，从顶部画布读取位置，但使用底部画布的上下文将线绘制到底部画布

（链接只是作为示例）

例如，可以包括一个简单的基本绘图函数：

HTML:

<div id="cont">
    <canvas id="canvasBottom" width=400 height=400></canvas>
    <canvas id="canvasTop" width=400 height=400></canvas>
</div>

#cont {
    position:relative;
    border:1px solid #777;
    height:400px;
    }
#cont > canvas {
    position:absolute;
    left:0;
    top:0;
    cursor:crosshair;
    }

JavaScript:

<div id="cont">
    <canvas id="canvasBottom" width=400 height=400></canvas>
    <canvas id="canvasTop" width=400 height=400></canvas>
</div>

#cont {
    position:relative;
    border:1px solid #777;
    height:400px;
    }
#cont > canvas {
    position:absolute;
    left:0;
    top:0;
    cursor:crosshair;
    }

加载图像并将其设置为顶层：

var img = new Image,
    canvas = document.getElementById('canvasBottom'),
    canvasTop = document.getElementById('canvasTop'),
    ctx = canvas.getContext('2d'),
    ctxMouse = canvasTop.getContext('2d');

img.onload = setup;
img.src = 'http://i.imgur.com/HNiER0v.png';

ctx.lineWidth = 5;
ctx.strokeStyle = 'rgb(0, 100, 255)';

function setup() {
    ctxMouse.drawImage(this, 0, 0);
}

手柄鼠标：

var px, py, isDown = false;

canvasTop.onmousedown = function (e) {
    var pos = getXY(e);
    px = pos.x;
    py = pos.y;
    isDown = true;
}

canvasTop.onmouseup = function () {
    isDown = false;
}

canvasTop.onmousemove = function (e) {
    if (isDown) {
        var pos = getXY(e);
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        px = pos.x;
        py = pos.y;
    }
}

function getXY(e) {
    var rect = canvasTop.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
}

如您所见，现在可以在初始图形后面绘制：

---

（现在，如果这不是一首大师作品，那么我不知道大师作品是什么。）

这太棒了，非常感谢！你让它很容易理解，我真的很感激。所以这工作非常完美，唯一的一点是，当我添加图像时，图像非常大。我想不出如何扩展它。。。仅仅设置img.width=200没有任何作用。有什么想法吗？@user3285918您可以使用drawImage的扩展参数，例如：

ctxMouse.drawImage（0，0，canvas.width，canvas.height）