我希望能够通过单击鼠标或触摸显示器在图片上绘制圆圈。我也想删除给定的圈子，如果再次单击/触摸它们。我知道如何检查给定坐标是否在圆内。问题是我不知道执行此任务的最佳方法。 Atm我正在使用HTML5画布通过.stroke（）函数绘制圆圈，但是我不知道如何“存储”这些圆圈，因此如果再次单击/触摸会删除这些圆圈。是否有比画布更好的解决方案，还是我甚至以正确的方式解决问题？
vfshangjitiku 回答：有没有在浏览器中创建绘图功能的首选方法？
这是基于SVG而非画布的解决方案。您可能会考虑一个好处：它易于描述，易于存储和检索。
makeSVG = (tag,attrs) => {
let el = document.createElementNS('http://www.w3.org/2000/svg',tag);
for (var k in attrs) el.setAttribute(k,attrs[k]);
return el;
}
$(() => {
let $svg = $('svg')
$('svg image').on('click',e => {
let x = e.pageX - $svg.offset().left;
let y = e.pageY - $svg.offset().top;
var circle= makeSVG('circle',{cx: x,cy: y,r:40,stroke: 'black','stroke-width': 2,fill: 'red'});
$svg.append(circle);
})
$('svg').on('click','circle',e => {
$(e.currentTarget).remove()
})
})html,body {
padding:0;
margin:0;
height:100%;
width:100%;
position: relative;
}
svg {
height:100%;
width:100%;
border: 1px solid red;
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100%" width="100%"/>
</svg>