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>元素，但我只需要在画布上完成这个特殊部分，没有别的。

Here's the fiddle

Answer 1

首先，你没有画布元素。其次，我没有看到你在哪里调用绘图部分。

<强> Live Demo

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

使用画布在图像上绘制

1 个答案: