如何解决图像上的画布形状在图像的特定坐标上具有模糊的边框
我有一张图片,上面有各种各样的椅子,所有椅子应该有不同的颜色(椅子应该可见)。我计算了椅子的坐标并使用画布绘制了一个形状,但是在图像缩放画布上,画布的外部边界模糊了。 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 举报,一经查实,本站将立刻删除。