图像上的画布形状在图像的特定坐标上具有模糊的边框

编程问答 2022-08-15

问题描述

我有一张图片，上面有各种各样的椅子，所有椅子应该有不同的颜色（椅子应该可见）。我计算了椅子的坐标并使用画布绘制了一个形状，但是在图像缩放画布上，画布的外部边界模糊了。 image with chairs and canvas shape 这种方法好吗？还是有另一种处理方法？ 

<div class="img-wrp">
    <canvas height="600" width="600" style="position: absolute;"></canvas>
    <img src="./picture.jpg" usemap="#image-map">
</div>

// helper method for finding coordinates of image
$('img').click(function (e) {
    var curleft = 0,curtop = 0,pos;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        pos.x= curleft;
        pos.y= curtop;
    };
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x1=" + x + ",y1=" + y;
    console.log(coord);
});
     
// shape draw for chair 
var c = $('canvas')[0];
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveto(40,73);
ctx.lineto(44,80);
ctx.lineto(49,77);
ctx.lineto(45,71);
ctx.closePath();
// ctx.strokeStyle = "transparent";
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlhtml5-canvasjavascriptjquery