JavaScript/Canvas/MouseEvent - 重新绘制（缩放）在某个点停止

【问题标题】：JavaScript/Canvas/MouseEvent - Re-draw(scale) stopped at some pointJavaScript/Canvas/MouseEvent - 重新绘制（缩放）在某个点停止
【发布时间】：2022-12-06 17:11:25
【问题描述】：

我这里有这个例子，你可以试试（请点击sn-p上的“全页”，看看发生了什么），对于某些人来说，第一次尝试可能没有问题。但是，请尝试多次徘徊，进出。在某些时候，“保存图标”会停在大尺寸当我们的鼠标指针超出范围时。

那么，如何解决这个问题呢？

const canvasHudSave = document.getElementById('hudSave');
const contextHudSave = canvasHudSave.getContext('2d');
hudSaveClicker();

function hudSaveClicker() {
  contextHudSave.clearRect(0, 0, canvasHudSave.width, canvasHudSave.height);
  const layer1 = 70;
  const x = canvasHudSave.width / 2;
  const y = canvasHudSave.height / 2;
  const saveButton = new Path2D();
  saveButton.roundRect(15, 5, 70, 70, 15);
  //contextHudSave.fillStyle = '#cc3300';
  //contextHudSave.fill(saveButton);

  contextHudSave.beginPath();
  contextHudSave.moveTo(x - (layer1 * Math.abs(0.23 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.23 - 0.5)), y - (layer1 * Math.abs(0.41 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.70 - 0.5)), y - (layer1 * Math.abs(0.42 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.70 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
  contextHudSave.closePath();
  contextHudSave.fillStyle = '#ffffff';
  contextHudSave.fill();
  contextHudSave.beginPath();
  contextHudSave.moveTo(x - (layer1 * Math.abs(0.09 - 0.5)), y - (layer1 * Math.abs(0.16 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.18 - 0.5)), y - (layer1 * Math.abs(0.08 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.24 - 0.5)), y - (layer1 * Math.abs(0.08 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.24 - 0.5)), y - (layer1 * Math.abs(0.36 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.28 - 0.5)), y - (layer1 * Math.abs(0.40 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.65 - 0.5)), y - (layer1 * Math.abs(0.40 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.67 - 0.5)), y - (layer1 * Math.abs(0.37 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.67 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.73 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.91 - 0.5)), y - (layer1 * Math.abs(0.39 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.91 - 0.5)), y + (layer1 * Math.abs(0.84 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.86 - 0.5)), y + (layer1 * Math.abs(0.91 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.15 - 0.5)), y + (layer1 * Math.abs(0.91 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.09 - 0.5)), y + (layer1 * Math.abs(0.85 - 0.5)));
  contextHudSave.closePath();
  contextHudSave.fillStyle = '#000000';
  contextHudSave.fill();
  contextHudSave.beginPath();
  contextHudSave.moveTo(x - (layer1 * Math.abs(0.30 - 0.5)), y - (layer1 * Math.abs(0.12 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.30 - 0.5)), y - (layer1 * Math.abs(0.27 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.41 - 0.5)), y - (layer1 * Math.abs(0.27 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.41 - 0.5)), y - (layer1 * Math.abs(0.12 - 0.5)));
  contextHudSave.closePath();
  contextHudSave.fillStyle = '#000000';
  contextHudSave.fill();
  contextHudSave.beginPath();
  contextHudSave.moveTo(x - (layer1 * Math.abs(0.15 - 0.5)), y - (layer1 * Math.abs(0.47 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.18 - 0.5)), y - (layer1 * Math.abs(0.45 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.82 - 0.5)), y - (layer1 * Math.abs(0.45 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.85 - 0.5)), y - (layer1 * Math.abs(0.47 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.85 - 0.5)), y + (layer1 * Math.abs(0.81 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.82 - 0.5)), y + (layer1 * Math.abs(0.84 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.18 - 0.5)), y + (layer1 * Math.abs(0.84 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.15 - 0.5)), y + (layer1 * Math.abs(0.81 - 0.5)));
  contextHudSave.closePath();
  contextHudSave.fillStyle = '#ffffff';
  contextHudSave.fill();
  contextHudSave.beginPath();
  contextHudSave.moveTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.54 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.58 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.58 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.54 - 0.5)));
  contextHudSave.closePath();
  contextHudSave.fillStyle = '#000000';
  contextHudSave.fill();
  contextHudSave.beginPath();
  contextHudSave.moveTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.69 - 0.5)));
  contextHudSave.lineTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.73 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.73 - 0.5)));
  contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.69 - 0.5)));
  contextHudSave.closePath();
  contextHudSave.fillStyle = '#000000';
  contextHudSave.fill();

  canvasHudSave.addEventListener('mousemove', (event) => {
    // Check whether point is inside circle
    const isPointInPath = contextHudSave.isPointInPath(saveButton, event.offsetX, event.offsetY);
    let layer1 = isPointInPath ? '110' : '70';
    contextHudSave.clearRect(0, 0, canvasHudSave.width, canvasHudSave.height);
    saveButton.roundRect(15, 5, 70, 70, 15);
    contextHudSave.beginPath();
    contextHudSave.moveTo(x - (layer1 * Math.abs(0.23 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.23 - 0.5)), y - (layer1 * Math.abs(0.41 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.70 - 0.5)), y - (layer1 * Math.abs(0.42 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.70 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
    contextHudSave.closePath();
    contextHudSave.fillStyle = '#ffffff';
    contextHudSave.fill();
    contextHudSave.beginPath();
    contextHudSave.moveTo(x - (layer1 * Math.abs(0.09 - 0.5)), y - (layer1 * Math.abs(0.16 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.18 - 0.5)), y - (layer1 * Math.abs(0.08 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.24 - 0.5)), y - (layer1 * Math.abs(0.08 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.24 - 0.5)), y - (layer1 * Math.abs(0.36 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.28 - 0.5)), y - (layer1 * Math.abs(0.40 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.65 - 0.5)), y - (layer1 * Math.abs(0.40 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.67 - 0.5)), y - (layer1 * Math.abs(0.37 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.67 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.73 - 0.5)), y - (layer1 * Math.abs(0.09 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.91 - 0.5)), y - (layer1 * Math.abs(0.39 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.91 - 0.5)), y + (layer1 * Math.abs(0.84 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.86 - 0.5)), y + (layer1 * Math.abs(0.91 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.15 - 0.5)), y + (layer1 * Math.abs(0.91 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.09 - 0.5)), y + (layer1 * Math.abs(0.85 - 0.5)));
    contextHudSave.closePath();
    contextHudSave.fillStyle = '#000000';
    contextHudSave.fill();
    contextHudSave.beginPath();
    contextHudSave.moveTo(x - (layer1 * Math.abs(0.30 - 0.5)), y - (layer1 * Math.abs(0.12 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.30 - 0.5)), y - (layer1 * Math.abs(0.27 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.41 - 0.5)), y - (layer1 * Math.abs(0.27 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.41 - 0.5)), y - (layer1 * Math.abs(0.12 - 0.5)));
    contextHudSave.closePath();
    contextHudSave.fillStyle = '#000000';
    contextHudSave.fill();
    contextHudSave.beginPath();
    contextHudSave.moveTo(x - (layer1 * Math.abs(0.15 - 0.5)), y - (layer1 * Math.abs(0.47 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.18 - 0.5)), y - (layer1 * Math.abs(0.45 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.82 - 0.5)), y - (layer1 * Math.abs(0.45 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.85 - 0.5)), y - (layer1 * Math.abs(0.47 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.85 - 0.5)), y + (layer1 * Math.abs(0.81 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.82 - 0.5)), y + (layer1 * Math.abs(0.84 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.18 - 0.5)), y + (layer1 * Math.abs(0.84 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.15 - 0.5)), y + (layer1 * Math.abs(0.81 - 0.5)));
    contextHudSave.closePath();
    contextHudSave.fillStyle = '#ffffff';
    contextHudSave.fill();
    contextHudSave.beginPath();
    contextHudSave.moveTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.54 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.58 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.58 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.54 - 0.5)));
    contextHudSave.closePath();
    contextHudSave.fillStyle = '#000000';
    contextHudSave.fill();
    contextHudSave.beginPath();
    contextHudSave.moveTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.69 - 0.5)));
    contextHudSave.lineTo(x - (layer1 * Math.abs(0.21 - 0.5)), y + (layer1 * Math.abs(0.73 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.73 - 0.5)));
    contextHudSave.lineTo(x + (layer1 * Math.abs(0.79 - 0.5)), y + (layer1 * Math.abs(0.69 - 0.5)));
    contextHudSave.closePath();
    contextHudSave.fillStyle = '#000000';
    contextHudSave.fill();
  });
  /*canvasHudSave.addEventListener('click', function(event) {
    // Check whether point is inside circle
    if (contextHudSave.isPointInPath(saveButton, event.offsetX, event.offsetY)) {
        saveThisBuild();
    }
  });*/
}
  * {
  margin: 0;
  padding: 0;
}

#hudSave {
  position: fixed;
  opacity: 1;
  background: transparent;
  top: 680px;
  left: 10px;
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>TEST</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <canvas id="hudSave" width="100" height="100"></canvas>
</body>

</html>
<script src="main.js"></script>

【问题讨论】：

  • 等等，您为软盘图标创建了 100 行 JS，然后为悬停效果创建了另外 100 行？
  • 是的，我知道更好的方法，我是新手。
  • 我的意思是，它仍然比使用我尝试过的 CSS 更好，但仅限于最多 3 个绘图层

标签： javascript html html5-canvas mouseover


【解决方案1】：

鉴于 canvas 是画布元素或 OffscreenCanvas object，请使用 clearRect：

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2017-08-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-07
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode