canvas鼠标事件,css3动画效果鼠标移入动画效果
关于Canvas的炫酷背景，我会不定期在git上更新，会附上详细的分析。喜欢的话可以去git上看看。
GitHub门户网站
前言
相信很多前端小白都看过这样的背景动画，很好奇如何达到这样的效果！把这种效果运用到自己的个人网站上，会让整个网站与众不同！
下面我就开门见山，用Canvas在最短的时间内做鼠标跟随动画。
如何制作动画
有几种常见的绘制动画的方法：
CSS3 SVG Canvas WebGL我们先来分析一下这些方法的优缺点。
Css3通过CSS3的关键帧实现动画效果，看似相当实用，但却增加了一个无意义的DOM节点。不符合语义编程标准的SVG和Canvas，可以用脚本语言实现动画。SVG本质上是一种使用XML描述2D图形的语言(矢量图)，SVG创建的每个元素都是一个独立的DOM元素。既然是独立的DOM元素，就意味着我们可以通过CSS和JS来控制DOM，也可以对每个DOM元素进行监控。但是，由于都是DOM元素，如果我们修改SVG中的DOM元素，浏览器会自动重绘DOM。Canvas通过Javascript绘制2D图形(位图)，Canvas只是一个HTML元素。图形不会单独创建DOM元素，所以我们无法通过Js操作Canvas中的图形，也无法监控具体的图形WebGL进行3D显示、动画和游戏。说白了就是基于Canvas的3D框架Canvas、SVG适用场景。
Canvas适用于位图、数据量绘制频率高的场景、小游戏、小特效、绘制图表、活动页面、酷炫背景等。SVG适用于矢量图和数据量绘制频率较低的场景，如图形图直击重点，制作鼠标跟随动画 。
最终效果
需求分析：鼠标移动时，经过的地方会产生一个圆。圆的半径由小变大。当它达到一个固定的大小时，圆圈消失，圆圈的颜色随机变化。
创建全屏Canvas元素
var canvas=document . getelementbyid( canvas )，ctx=canvas.getContext(2d )，WIDTH=canvas . WIDTH=document . documentelement . client WIDTH，Height=canvas . Height=document . documentelement . client Height，para={num: 100，color: false，//如果颜色为false，则为随机渐变颜色半径：0.9，//每次o: 0.09时圆的半径增加，//判断圆消失的情况。值越大消失越快}，color，circlecolor，round _ arr=[]；//保存圆圈的数组侦听鼠标onmousemove事件。
要求：鼠标移动过程中，鼠标滑过的位置会产生一个逐渐变大的圆。
在Canvas中创建动画的方法是不断清空屏幕，然后重新绘制。
由于移动轨迹是由圆组成的，所以我们要用数组来存储圆的信息(xy坐标，半径)，然后在数组中存储鼠标移动时鼠标的位置信息。
所以监控onmousemove事件就是为了获取鼠标的信息。
window . onmousemove=function(event){ x=event.clientx//currently在屏幕的x位置，Y=event.clientY //当前在屏幕的Y位置//将信息存储在循环数组round _ arr.push ({x: x，y: y，radius: para.radius o: 1})中
在onmousemove中，我们已经在round_arr圆形数组中存储了坐标信息和半径，然后我们设置颜色。
在para对象中，默认颜色为false，表示圆的颜色是随机的。如果color不是false，那么圆圈的颜色就是color的颜色。
If(para . color){ circle color=para . color } else { color=math . random()* 360 }如果要设置颜色渐变If(！para . color){ color=. 1；circleColor=hsl( color ，100%，80%)；}如果你想改变颜色，你需要把颜色改变的代码放在一个函数里，这个函数会一直被执行。
定义animation()函数！重要的
function animate() { if(！para.color) { #设置颜色color=.1 color2=hsl( color ，100%，80%) } ctx.clearRect(0，0，WIDTH，HEIGHT) #清除屏幕for(var I=0；CTX。填充样式=圆形颜色CTX。开始路径()CTX。arc(round _ arr[I]).x，round_arr[i].y，round_arr[i].半径，0,数学.* 2)#画圆CTX。关闭路径()CTX。fill()round _ arr[I].半径=参数半径#增大半径round_arr[i].o -=第o段#消失快慢if( round_arr[i].o=0){ #移除圆round_arr.splice(i，1)I-} }窗口。请求动画帧(动画)#使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用}requestAnimationFrame()会告诉浏览器，你需要执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画requestAnimationFrame()使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用
完整代码
！文档类型html html lang= en head meta charset= UTF-8 标题鼠标屏幕互动动画/title style * { padding:0；边距：0;} #画布{背景：# 000;}/style/head body canvas id= canvas /canvas脚本var canvas=document。getelementbyid( canvas )，ctx=canvas.getContext(2d )，WIDTH=canvas。宽度=文档。文档元素。客户端宽度，高度=画布。高度=文档。文档元素。客户身高，para={ num: 100，color: false，//颜色如果是错误的则是随机渐变颜色半径：0.9，o: 0.09，//判断圆消失的条件，数值越大，消失的越快}，color，circleColor，round _ arr=[]；窗户。onmousemove=function(event){ X=event。clientx Y=事件。客户端round _ arr。push({ X:X，Y: Y，radius: para.radius，o: 1 }) } //判断参数中是否设置颜色，设置则使用该颜色，否则为随机如果(第10段)。color){ circle color=para。color } else { color=math。random()* 360 }函数animate(){ if(！段color){ color=。1 circle color= HSL( color ，100%，80%) } ctx.clearRect(0，0，WIDTH，HEIGHT) //清除屏幕for(var I=0；CTX。填充样式=圆形颜色CTX。开始路径()//开始路径ctx.arc(round_arr[i].x，round_arr[i].y，round_arr[i].半径，0,数学* 2)//画圆ctx.closePath() //结束路径ctx.fill() round_arr[i].radius=para.radius //增大圆round_arr[i].o -=para.o //消失时间变快if (round_arr[i].o=0) { round_arr.splice(i，1)；I-；} }窗口。requestanimationframe(animate)} animate()/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。