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

【问题标题】：drawing point on canvas not working on safari画布上的绘图点在 Safari 上不起作用
【发布时间】：2020-09-22 07:31:20
【问题描述】：

我想使用画布在鼠标悬停时绘制点：我的实现在 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();
});

【问题讨论】：

标签： javascript html canvas safari

【解决方案1】：

按照the specs，Safari 会这样做

从路径中删除所有零长度line segments。

从 path 中删除任何不包含行的子路径（即只有一个点的子路径）。

在追踪之前。

您的路径完全由长度为零的线段 (moveTo(x,y); lineTo(x,y)) 组成，因此没有任何东西可以绘制。

其他浏览器有问题：Firefox bug report、Chrome's。

要做你想做的事，即画一个圆圈，请使用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();

});

&lt;canvas width="900" height="900"&gt;

【讨论】：