javascript - 如何绘制低透明度的rgba圆，中心精确地位于给定的X和Y变形

我正在使用脚本收集点击位置（PageY和PageX）：

//heatmap
var hitMap = [];
function hitMapF(){
    $('body').click(function(zdarzenie){
        hitMap.push(zdarzenie.pageX +", "+ zdarzenie.pageY);
        console.log(hitMap);
    });
}

hitMapF();

每个点击操作以及数组的下一个位置，如下所示：
第一次点击：

["335, 161"]

再点击一下：

["335, 161", "190, 318"]

再点击一下：

["335, 161", "190, 318", "212, 542"]

再点击一下：

["335, 161", "190, 318", "212, 542", "144, 736"]

等等 ...

我想使用来自hitMap数组的这些尺寸（PageY和PageX）作为中心来绘制一个低不透明度的圆，例如：rgba（215，44，44，0.01）的宽度和高度可以说是100 px；

最终，它将为用户交互产生一个基本的命中图。任何想法如何用js / JQuery完成此图？谢谢

最佳答案

尝试利用Array.prototype.pop从left的最后一个条目中设置“ hit”的top和hitMap

//heatmap
var hitMap = [];

function hitMapF() {
  $("body").click(function(zdarzenie) {
    hitMap.push(zdarzenie.pageX + ", " + zdarzenie.pageY);
    var hit = hitMap.pop().split(",");
    console.log(hit[0])
    $("<div>", {
      css: {
        width: "100px",
        height: "100px",
        background: "rgba(215, 44, 44, 0.01)",
        position: "absolute",
        borderRadius: "50%",
        border: "1px dotted #000",
        // subtract half of "circle" `width` from `left`, `top` properties
        left: hit[0] - 50 + "px",
        top: hit[1] - 50 + "px"
      }
    }).appendTo(this);
  });
}

hitMapF();

body {
  width: 500px;
  height: 250px;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>