javascript - 使用 Canvas 在图像上绘制

Question

我有一张像这样加载的图片:

<img src="map/racetrack.jpg" id="map">

这是我的绘图函数:

this.drawRoute = function(){
    var pos = [];
    var canvas = $('<canvas/>')[0];
    var img = $('#map')[0]; 
    var ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;
    $(window).on('mousedown', function(e){
        pos.push({
            x: e.clientX,
            y: e.clientY
        });
    });

    if (positions.length > 1) {

        ctx.beginPath();
        ctx.moveTo(pos[0].x, pos[0].y);
        for (var i = 1; i < pos.length; i++) {
            ctx.lineTo(pos[i].x, pos[i].y);
        }
        ctx.stroke();
    }

}

但是图片上什么也没画。我看不出错误在哪里。我知道通常我应该使用 <canvas>元素，但我只需要在 Canvas 中完成这个特定部分，不需要其他任何东西。

Here's the fiddle

Answer 1

首先有几件事你没有 Canvas 元素。其次，我没有看到你在哪里调用绘图部分。

<强> Live Demo

我最终做的是添加一个 Canvas 元素，隐藏图像，然后每次绘制时都会将图像绘制到 Canvas 上，然后在其上绘制点。希望这足以让您开始。

    var pos = [];
    var canvas = $('#canvas')[0];
    var img = $('#map')[0];
    var ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;


    function render() {
        ctx.drawImage(img, 0, 0);

        if (pos.length > 1) {
            ctx.beginPath();
            ctx.moveTo(pos[0].x, pos[0].y);
            for (var i = 1; i < pos.length; i++) {
                ctx.lineTo(pos[i].x, pos[i].y);
            }
            ctx.stroke();
        }
    }

    $(window).on('mousedown', function (e) {
        pos.push({
            x: e.clientX,
            y: e.clientY
        });
        render();
    });

render();