我只想将特定光标 png 应用到 Canvas 的一部分。我有这个,它适用于整个 Canvas
.myClass {
cursor: url('../img/myCursor.png') 7 33, auto; /* img hotspot centred*/
}
但我想,例如,只将它应用到 Canvas 的左手 50%(或者说 x 轴上的前 300px)。
这可能吗?
最佳答案
您可以在 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>
关于javascript - 将 CSS 样式应用于 Canvas 的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69170742/