javascript - 将 CSS 样式应用于 Canvas 的一部分

Question

我只想将特定光标 png 应用到 Canvas 的一部分。我有这个，它适用于整个 Canvas

.myClass {
    cursor: url('../img/myCursor.png') 7 33, auto; /* img hotspot centred*/
}

但我想，例如，只将它应用到 Canvas 的左手 50%(或者说 x 轴上的前 300px)。

这可能吗？

Answer 1

您可以在 Canvas 上放置 2 个 div，并为每个 div 设置不同的 cursor 属性:

const c = document.querySelector('canvas').getContext('2d');

c.beginPath();
c.moveTo(200, 0);
c.lineTo(200, 400);
c.stroke();

/* draw vertical line down middle */

.container {
  position: relative;
  width: 400px;
}

canvas {
  border: 1px solid;
}

.positioned {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
}

#left {
  left: 0;
  cursor: url('https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1') 7 33, auto;
}

#right {
  cursor: url('https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176') 7 33, auto;
  right: 0px;
}

<div class="container">
  <canvas height="400" width="400"></canvas>
  <div class="positioned" id="left"></div>
  <div class="positioned" id="right"></div>
</div>