如何在鼠标悬停时调整画布元素的大小

发布于 2025-01-02 00:35:31 字数 46 浏览 1 评论 0原文

我想在鼠标悬停事件上调整画布元素的大小并缓慢增大其大小(如弧线)。我该怎么做?

I want to resize and slowly growing size canvas element (like a arc) on the mouseover event. How can I do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

南七夏 2025-01-09 00:35:31

鼠标悬停在画布本身上?只需添加一个事件侦听器并按照您想要的方式重绘场景:

// Every time the mouse comes over the canvas the radius increases.
// you could even add a timer so that every time the mouse stays over
// the canvas the radius continues to increase constantly
can.addEventListener('mouseover', function(e) {
    radius += 10;
    ctx.clearRect(0,0,can.width, can.height);
    ctx.beginPath();
    ctx.arc(150, 150, radius, 0, Math.PI*.8, false);
    ctx.stroke();
}, false);

http://jsfiddle.net/dAQdL/

将鼠标悬停在画布上绘制的“对象”上?您必须向画布添加对象持久性和检测

mouseover on the canvas itself? Just add an event listener and redraw the scene the way you want:

// Every time the mouse comes over the canvas the radius increases.
// you could even add a timer so that every time the mouse stays over
// the canvas the radius continues to increase constantly
can.addEventListener('mouseover', function(e) {
    radius += 10;
    ctx.clearRect(0,0,can.width, can.height);
    ctx.beginPath();
    ctx.arc(150, 150, radius, 0, Math.PI*.8, false);
    ctx.stroke();
}, false);

http://jsfiddle.net/dAQdL/

mouseover an "object" drawn on the canvas? You're gonna have to add object persistence and detection to the canvas.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文