Canvas图标放大缩小渐变动画效果实现教程 - 鼠标悬停交互

\u003c!-- 要实现鼠标移至图标上的放大缩小渐变动画效果，可以使用Canvas来绘制图标，并监听鼠标移动事件来触发动画效果。 --\u003e\n\u003c!-- 首先，需要在HTML中添加一个Canvas元素和一个图标，如下所示： --\u003e\n\u003ccode\u003e\u003chtml\u003e\n\u003chead\u003e\n\u003ctitle\u003eCanvas图标放大缩小渐变动画\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003ccanvas id\u003d"canvas"\u003e\u003c/canvas\u003e\n\u003cimg id\u003d"icon" src\u003d"icon.png" alt\u003d"Icon"\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\u003c/code\u003e\n\u003c!-- 接下来，需要在JavaScript中获取Canvas元素和图标元素，并创建一个Canvas绘图上下文对象： --\u003e\n\u003ccode\u003e\nconst canvas \u003d document.getElementById('canvas');\nconst context \u003d canvas.getContext('2d');\nconst icon \u003d document.getElementById('icon');\n\u003c/code\u003e\n\u003c!-- 然后，设置Canvas的宽度和高度与图标相同，并绘制图标： --\u003e\n\u003ccode\u003e\ncanvas.width \u003d icon.width;\ncanvas.height \u003d icon.height;\ncontext.drawImage(icon, 0, 0);\n\u003c/code\u003e\n\u003c!-- 接下来，需要监听鼠标移动事件，并在鼠标移动时触发动画效果。在鼠标移动事件的回调函数中，可以根据鼠标的位置计算出放大缩小的比例，并重新绘制图标： --\u003e\n\u003ccode\u003e\ncanvas.addEventListener('mousemove', function(event) {\n const rect \u003d canvas.getBoundingClientRect();\n const scaleX \u003d (event.clientX - rect.left) / canvas.width;\n const scaleY \u003d (event.clientY - rect.top) / canvas.height;\n const scale \u003d Math.abs(scaleX - 0.5) + Math.abs(scaleY - 0.5) + 0.5;\n \n context.clearRect(0, 0, canvas.width, canvas.height);\n context.drawImage(icon, 0, 0, icon.width * scale, icon.height * scale);\n});\n\u003c/code\u003e\n\u003c!-- 在每次鼠标移动时，先清除Canvas上的内容，然后根据放大缩小的比例重新绘制图标。放大缩小的比例可以根据鼠标位置相对于Canvas的位置来计算，其中scaleX和scaleY表示鼠标在水平和垂直方向上的相对位置，scale表示放大缩小的比例。 --\u003e\n\u003c!-- 这样，当鼠标移至图标上时，就会触发放大缩小的渐变动画效果。 --\u003e