如何在单击javascript的位置绘制圆圈答案

【问题标题】：How to draw circle in the place of click java script如何在单击javascript的位置绘制圆圈
【发布时间】：2021-06-09 08:08:41
【问题描述】：

我不懂js，我是用python写的，但是我需要在网页上点击的位置画圆圈。所以，因为我真的使用硒，我需要看看点击在哪里。因为我不点击dom元素，所以点击坐标有时Selenium点击错误，所以想控制一下。我尝试了一些类似下面的代码，当然它不起作用，我不知道为什么。所以我找到了similar solution。它对我不起作用。所以我找不到突出显示点击的有效解决方案。

var canv = document.createElement('canvas');
canv.id = 'canvas';

document.body.appendChild(canv);
document.getElementById('canvas').appendChild(canv);
onclick = function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var radius = 5;
  var canvas = document.getElementsByTagName('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(x, y, radius, 40, 0, 2 * Math.PI);
  ctx.stroke();
  var coords = 'X coords: ' + x + ', Y coords: ' + y;
  console.log(coords);
}

【问题讨论】：

标签： javascript selenium onclick highlight

【解决方案1】：

您尝试将画布附加到画布上

这行得通

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
var ctx = canv.getContext('2d');
canv.addEventListener("click",function(event) {
  var x = event.clientX;
  var y = event.clientY;
  var radius = 5;
  ctx.beginPath();
  ctx.arc(x, y, radius, 40, 0, 2 * Math.PI);
  ctx.stroke();
  var coords = 'X coords: ' + x + ', Y coords: ' + y;
  console.log(coords);
})

【讨论】：

非常感谢您的回答，是的，它有效，没有错误，但没有绘制圆圈。也许我不准确，我想在点击任何网页的地方看到圆圈。也许是这样？
运行 sn-p 时在 Chrome 中看到圆圈
好的，谢谢，那我做错了）
如果你想这样做，你需要在页面上覆盖画布，但如果你这样做，底层页面将不会收到点击
不幸的是，这个解决方案根本不适用于我的电脑。没有任何圈子。

【解决方案2】：

决定是

var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);
myCanvas.id = 'canvas';
myCanvas.style.position = 'absolute';
myCanvas.style.left = "0px";
myCanvas.style.top = "0px";
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;

var ctx = myCanvas.getContext('2d');
myCanvas.addEventListener("click", function (event) {
  var x = event.clientX;
  var y = event.clientY;
  ctx.fillStyle = "#2980b9";
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
  setTimeout(function () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) }, 300);
})

【讨论】：