使用画布在图像上绘制

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>元素，但是我只需要在画布上完成此特定部分，就别无其他。

这是小提琴

Answer 1

好几件事首先您没有画布元素。 其次，我看不到您在哪里叫抽奖部分。

现场演示

我最终要做的是添加一个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();