文章/答案/技术大牛

发布

问使用画布绘制图像
EN

Stack Overflow用户

提问于 2013-12-12 16:06:48

回答 1查看 758关注 0票数 1

我有一张照片，上面是这样的：

<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>元素，但是我只需要在画布中完成这个特定的部分，没有其他的。

这是小提琴

drawing

javascript

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-12 16:27:18

好吧，首先，你没有画布元素。第二，我没有看到你在哪里叫抽奖部分。

现场演示

最后我做的是添加一个画布元素，隐藏图像，然后每次你画的时候它都会把图像画到画布上，然后在上面画点。希望这足以让你开始工作。

    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();

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20548336

复制

相似问题

问使用画布绘制图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用画布绘制图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用画布绘制图像
EN