如何在canvas上实现常见鼠标交互：进入区域和悬停

Canvas cursor interaction，鼠标移动到画布不同的区域会呈现不同的颜色，悬停在链接上会放大。

h5, canvas, mouse, 交互

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5804
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const canvas = document.querySelector('.js-canvas')
const ctx = canvas.getContext('2d')

let width = canvas.width = window.innerWidth
let height = canvas.height = window.innerHeight

let mouseX = width / 2;
let mouseY = height / 2;

let circle = {
  radius: 10,
  lastX: mouseX,
  lastY: mouseY
}

const elems = [...document.querySelectorAll('[data-hover]')]

function onResize () {
  width = canvas.width = window.innerWidth
  height = canvas.height = window.innerHeight
}

function render () {
  circle.lastX = lerp(circle.lastX, mouseX, 0.25)
  circle.lastY = lerp(circle.lastY, mouseY, 0.25)
  
  ctx.clearRect(0, 0, width, height)
  ctx.beginPath()
  ctx.arc(circle.lastX, circle.lastY, circle.radius, 0, Math.PI * 2, false)
  ctx.fillStyle = "#ffffff"
  ctx.fill()
  ctx.closePath()
  
  requestAnimationFrame(render)
}

function init () {
  requestAnimationFrame(render)
  
  window.addEventListener('mousemove', function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  })

window.addEventListener('resize', onResize, false)
  
  let tween = TweenMax.to(circle, 0.25, {
    radius: circle.radius * 3,
    ease: Power1.easeInOut,
    paused: true
  })
  
  elems.forEach((el) => {
    el.addEventListener('mouseenter', () => {
      tween.play()
    }, false)
    el.addEventListener('mouseleave', () => {
      tween.reverse()
    }, false)
  })
}

function lerp(a, b, n) {
  return (1 - n) * a + n * b
}

init()

编译

CSS

HTML

Canvas cursor interaction，鼠标移动到画布不同的区域会呈现不同的颜色，悬停在链接上会放大。

h5, canvas, mouse, 交互

编辑器支持Emmet

快捷键

Canvas cursor interaction，鼠标移动到画布不同的区域会呈现不同的颜色，悬停在链接上会放大。

h5, canvas, mouse, 交互

如何在canvas上实现圆形渐变色画笔

如何使用canvas 2d实现三维顶点海洋动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：