5分钟完成Canvas电脑鼠标追随动漫情况

2021-02-22 14:09 jianzhan

有关Canvas制做酷炫情况,我会在git上不确定时去升级,并会附上详尽的分析,假如有喜爱的话,能够到git上瞧瞧

gitHub传输门

序言

坚信许多前端开发小白都看过这样的情况动漫,也好奇心怎样去完成这类实际效果!将这类实际效果运用到自身的本人网站上,会让全部网站变得不同寻常!

 

下面我会直击关键,用最短的時间,应用 Canvas 制做 电脑鼠标追随动漫

 怎样制做动漫

常见的制图动漫的方法有下列几种:

  • CSS3
  • SVG
  • Canvas
  • WebGL

让大家先剖析剖析这些方式的好坏性

  • CSS3 根据css3的重要帧等方法完成动漫实际效果,看起来仿佛挺好用,但这样提升了1个沒有实际意义的DOM连接点,不符词义化程序编写标准
  • SVG、Canvas 都可以以应用脚本制作語言来完成动漫
    • SVG 实质上是应用XML叙述2D图型的語言(矢量图),SVG建立的每个元素全是1个单独的DOM元素,既然是单独的DOM元素,那表明大家能够根据CSS和JS来操纵DOM,还可以对每个DOM元素开展监视,但因为全是DOM元素,因此假如大家改动了SVG中的DOM元素,访问器就会全自动开展DOM重绘
    • Canvas根据Javascript来绘图2D图型(位图),而Canvas只是1个HTML元素,在其中的图型不容易独立建立DOM元素,因此大家没法根据Js来实际操作Canvas内的图型,也没法监视实际图型
  • WebGL 用于三d展现、动漫、手机游戏,简言之便是根据Canvas的三d架构

 Canvas、SVG可用情景

  • Canvas 可用于位图,高数据信息量绘图频率的情景,小手机游戏,小殊效,绘图图表、主题活动网页页面、酷炫情况
  • SVG 可用于矢量图,低数据信息量绘图频率的情景,如图型图表

直击关键,制做电脑鼠标追随动漫

最后实际效果

要求剖析:电脑鼠标挪动,历经的地区建立1个圆,圆的半径尺寸由小增大,做到某个固定不动尺寸时该圆消退,圆的色调任意转变

建立全屏Canvas元素

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    WIDTH = canvas.width = document.documentElement.clientWidth,
    HEIGHT = canvas.height = document.documentElement.clientHeight,
    para = {
        num: 100,
        color: false,    //  色调  假如是false 则是任意渐变色色调
        radius: 0.9,          //   圆每次提升的半径 
        o: 0.09,         //      分辨圆消退的标准,标值越大,消退的越快
    },
    color,
    circleColor,
    round_arr = [];     // 储放圆的数字能量数组 

监视电脑鼠标 onmousemove 恶性事件

要求:在电脑鼠标挪动的全过程中,持续在电脑鼠标滑过的部位造成1个慢慢增大的圆

Canvas中建立动漫的方法便是持续的消除显示屏随后重绘

因为挪动的运动轨迹是由1个个圆组成,那大家就应当应用数字能量数组储存圆的信息内容(xy座标,半径),随后在电脑鼠标挪动的情况下将电脑鼠标的部位信息内容储放在数字能量数组中

因此监视onmousemove恶性事件便是以便拿到电脑鼠标的信息内容

window.onmousemove = function(event) {
    X = event.clientX  // 当今在显示屏的x部位
    Y = event.clientY  // 当今在显示屏的y部位

    // 将信息内容存入圆数字能量数组
    round_arr.push({
        X:X,
        Y:Y,
        radius:para.radius
        o:1
    })
}

设定 color

在onmousemove中,大家早已将座标信息内容和半径存入round_arr圆数字能量数组中,接下来就设定色调了

在para目标里,默认设置的color是false,表明圆的色调是任意的,假如color不为false,则圆的色调就为color的色调

if(para.color){
    circleColor = para.color
}else{
    color = Math.random() * 360
}

若要想设定色调渐变色
if (!para.color) {
    color += .1;
    circleColor = 'hsl(' + color + ',100%,80%)';
}

假如要让色调转变,则必须将色调转变的编码放在1个会1直实行的涵数

界定 animation() 涵数 !important

function animate() {

    if (!para.color) {         # 设定色调
        color += .1
        color2 = 'hsl(' + color + ',100%,80%)'
    }

    ctx.clearRect(0, 0, WIDTH, HEIGHT)      # 消除显示屏

    for (var i = 0; i < round_arr.length; i++) {

        ctx.fillStyle = circleColor 
        ctx.beginPath()
        ctx.arc( round_arr[i].X ,round_arr[i].Y,round_arr[i].radius,0, Math.PI * 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--
        }
    }

    window.requestAnimationFrame(animate)   # 应用1个回调函数涵数做为主要参数,这个回调函数涵数会在访问赏识绘以前启用
}

requestAnimationFrame()会告知访问器,你必须实行动漫,并恳求访问器启用特定的涵数在下1次重绘以前升级动漫。requestAnimationFrame()应用1个回调函数涵数做为主要参数,这个回调函数涵数会在访问赏识绘以前启用

详细编码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <title>电脑鼠标显示屏互动交流动漫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #canvas {
            background: #000;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            WIDTH = canvas.width = document.documentElement.clientWidth,
            HEIGHT = canvas.height = document.documentElement.clientHeight,
            para = {
                num: 100,
                color: false, //  色调  假如是false 则是任意渐变色色调
                radius: 0.9,
                o: 0.09, //  分辨圆消退的标准,标值越大,消退的越快
            },
            color,
            circleColor,
            round_arr = [];

        window.onmousemove = function(event) {
            X = event.clientX
            Y = event.clientY

            round_arr.push({
                X: X,
                Y: Y,
                radius: para.radius,
                o: 1
            })
        }

        // 分辨主要参数中是不是设定color,设定则应用该color,不然为任意
        if (para.color) {
            circleColor = para.color
        } else {
            color = Math.random() * 360
        }

        function animate() {
            if (!para.color) {
                color += .1
                circleColor = 'hsl(' + color + ',100%,80%)'
            }

            ctx.clearRect(0, 0, WIDTH, HEIGHT) // 消除显示屏

            for (var i = 0; i < round_arr.length; i++) {
                ctx.fillStyle = circleColor
                ctx.beginPath() // 刚开始相对路径
                ctx.arc(round_arr[i].X, round_arr[i].Y, round_arr[i].radius, 0, Math.PI * 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--;
                }
            }

            window.requestAnimationFrame(animate)
        }

        animate()
    </script>
</body>

</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。