画布上的绘图点在 Safari 上不起作用

Question

我想使用canvas在鼠标悬停时绘制点：我的实现在chrome和firefox上工作正常，但由于某种原因它在safari上不起作用（但是，在鼠标悬停上画一条线在safari上工作）

如有任何帮助，我们将不胜感激！

---> https://draw-9.superhi.com/

代码：

let canvas = document.querySelector("canvas");

let x = 0;
let y = 0;


let context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 15;
context.lineCap = "round";

canvas.addEventListener("mousemove", function(e) {
  
    x = e.offsetX;
    y = e.offsetY;

  context.moveTo(x, y);
   context.lineTo(x, y);
    context.stroke();
});

Answer 1

根据规范，Safari 确实如此

2. 从路径中修剪所有零长度线段。
3. 从path中删除任何不包含行的子路径（即只有一个点的子路径）。

在追踪之前。

您的路径完全由此类零长度线段组成（

moveTo(x,y); lineTo(x,y)

），因此无需绘制任何内容。

其他浏览器也存在错误：Firefox 错误报告、Chrome 的，但目前正在开放规范问题，以讨论哪种行为应该是默认行为。另外，Chrome 最近改变了它们的行为，但它并没有添加太多互操作...

因此，为了做你想做的事情，即画一个圆，请使用

arc()

方法。另外，不要忘记调用

beginPath()

，否则你的路径只会增长，最终你会一遍又一遍地抚摸同一个地方，导致糟糕的图形和性能。

const canvas = document.querySelector("canvas");

let x = 0;
let y = 0;

const radius = 7.5;
const context = canvas.getContext("2d");
context.strokeStyle = "black";

canvas.addEventListener("mousemove", function(e) {
  
  x = e.offsetX;
  y = e.offsetY;

  context.beginPath();
  context.moveTo(x + radius, y);
  context.arc(x, y, radius, 0, Math.PI*2);
  context.fill();

});

<canvas width="900" height="900">