Canvas 效果实例

来源：互联网发布：北京交大知行论坛编辑：程序博客网时间：2024/04/29 04:23

0.备注

如果当前网页存在某些图片未能正确加载，请点击下方链接。

Canvas 效果实例

1.前言

在上一篇文章，HTML 5 动态效果制作方法整理中，我们分别介绍了前端开发中常用的几种动态效果的做法。

其中，关于 Canvas 是现在非常流行，并且也被广泛运用的一种技术。

那今天就一起来跟着我学习一下，如何实现下面的这个图片吧。

2.前期准备

我们的 Canvas 更擅长绘制大量的效果，例如我们上面看到的这个小动画。

我们就可以通过 Canvas 去完成，那么问题就来了。

我们要完成这个内容，该从何下手呢？

接下来就一起来跟着我分析一下这个效果有哪些需求吧。

效果需求：

需要一张 Canvas 画布
在画布上绘制许多个小点
小点会来回移动
小点移动到边框的时候需要回弹
每两个小点之间在一定距离之内，绘制线
当鼠标移入的时候，让内部的小点跟随鼠标的移动

既然我们明确了需求，那么接下来就开始编写我们的代码吧。

3.绘制画布

在开讲之前，如果没有 Canvas 基础的小伙伴，可以先去查阅一下下面的两篇文章。

Canvas 基础（上）
Canvas 基础（下）

如果大家已经对 Canvas 有一定的了解，接下来就正式开始绘制吧。

首先创建一个 <canvas> 标签，并且对 html 和 body 进行一些简单的设置。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>MR_LP:3206064928</title>    <style>        html,body{            margin: 0;            padding: 0;            height: 100%;            overflow: hidden;        }    </style></head><body>  <canvas id="MR_LP">如果你能看见这行文字，说明你的浏览器不支持 Canvas</canvas></body></html>

这时候我们就相当于绘制了一个画布，只不过这个画布我们还没有给定宽度和高度。

这时候有两种选择，第一种就是自己会给定宽度和高度。

另外一种就是去获取当前浏览器的宽度。

这时候我们首先需要获取到我们的画布元素。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>MR_LP:3206064928</title>    <style>        html,body{            margin: 0;            padding: 0;            height: 100%;            overflow: hidden;        }    </style></head><body> <canvas id="MR_LP">如果你能看见这行文字，说明你的浏览器不支持 Canvas</canvas></body><script>     //获取 canvas 元素     var canvas = document.getElementById("MR_LP");     //渲染上下文     var ctx = null;     if(canvas.getContext){      //获取 canvas 画布的上下文      ctx = canvas.getContext("2d");      //注意：此处必须填写小写2d     }</script></html>

需要注意咯，接下来的 JS 部分代码默认填写在这后面，完整代码会在文章最后放出。

当我们获取到我们的画布元素之后，我们就可以直接给我们的 Canvas 元素去设置我们的宽度和高度了。

    resize();    window.onresize = resize;    function resize(){        canvas.width = window.innerWidth ||                        document.getElement.clientWidth ||                        document.body.clientWidth;        canvas.height = (window.innerHeight ||                        document.getElement.clientHeight ||                        document.body.clientHeight) - 200;        //为了在底部留出一段距离     }

这时候我们就可以去完成另外的需求了，这时候我们要去获取一下我们的鼠标的位置。

//获取鼠标活动时的鼠标坐标 var warea = {  x:null,  y:null,  max:20000 }; //注意：在书写的时候，内部千万不要加 ；     window.onmousemove = function(e){        e = e || window.event;        warea.x = e.clientX;        warea.y = e.clientY;    };    window.onmouseout = function(e){        warea.x = null;        warea.y = null;    };

记得鼠标获取尽量放在绘制线之前，这样的话，我们可以直接去处理我们的另外一个需求。

处理了鼠标之后，我们就开始绘制我们的一个个点吧。

 //添加粒子 //x  , y  为  粒子坐标 //xa , ya 为  粒子 xy 轴加速度 //max     为  连线的最大距离 var dots = []; for(var i = 0; i < 300; i++){  var x = Math.random() * canvas.width;  var y = Math.random() * canvas.height;  var xa = Math.random() * 2 - 1;  var ya = Math.random() * 2 - 1;  dots.push({   x : x,   y : y,   xa : xa,   ya : ya,   max : 6000  }) }

记得添加点的时候，要设置一个最大的宽度。

这时候我们还没法看到具体的效果，因为我们还需要绘制我们的点。

这时候去创建一个 animate 函数，之后不停的去触发它，并且需要去进行一个判断，如果你的小点超出边界，需要将其反向，并且要记得去调用动画。

    // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错    setTimeout(function(){        animate();    }, 100);    // 每一帧循环的逻辑    function animate(){        ctx.clearRect(0,0,canvas.width, canvas.height);        // 将鼠标坐标添加进去，产生一个用于比对距离的点数组        var ndots  = [warea].concat(dots);        dots.forEach(function(dot){            // 粒子位移            dot.x += dot.xa;            dot.y += dot.ya;            // 遇到边界将加速度反向            dot.xa *= (dot.x > canvas.width || dot.x < 0)? -1:1;            dot.ya *= (dot.y > canvas.height || dot.y < 0)? -1:1;            // 绘制点            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);            // 将已经计算过的粒子从数组中删除            ndots.splice(ndots.indexOf(dot), 1);        });       var RAF = (function(){       return window.requestAnimationFrame ||              window.webkitRequestAnimationFrame||              window.mozRequestAnimationFrame||              window.oRequestAnimationFrame ||               window.msRequestAnimationFrame ||               function (callback) {                  window.setTimeout(callback, 1000 / 60);              }  })();        RAF(animate);    }

这时候我们就应该能看到我们的效果了。

能够看到我们的界面当中，每一个小点都在不停的运动。

同时，如果小点超出边界了，我们还可以让小点从新回来。

这时候我们再来看一下，最开始我们的需求还有哪些？

还有两个需求没完成。

一个是鼠标移入的时候，小点要跟随鼠标移动
点和点之间，要在最大宽度内绘制一条线。

这时候我们需要回到之前的动画函数当中，去做判断，并且要将点与点之间，连起来。

这里直接放完整的 animate 函数。

    // 每一帧循环的逻辑    function animate(){        ctx.clearRect(0,0,canvas.width, canvas.height);        // 将鼠标坐标添加进去，产生一个用于比对距离的点数组        var ndots  = [warea].concat(dots);        dots.forEach(function(dot){            // 粒子位移            dot.x += dot.xa;            dot.y += dot.ya;            // 遇到边界将加速度反向            dot.xa *= (dot.x > canvas.width || dot.x < 0)? -1 : 1;            dot.ya *= (dot.y > canvas.height || dot.y < 0)? -1 : 1;            // 绘制点            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);            // 循环比对粒子间的距离            for (var i = 0; i < ndots.length; i++) {                var d2 = ndots[i];                if (dot === d2 || d2.x === null || d2.y === null){                 continue;                }                var xc = dot.x - d2.x;                var yc = dot.y - d2.y;                // 两个粒子之间的距离                var dis = xc * xc + yc * yc;                // 距离比                var ratio;                // 如果两个粒子之间的距离小于粒子对象的max值                //则在两个粒子间画线                if(dis < d2.max){                    // 如果是鼠标，则让粒子向鼠标的位置移动                    if (d2 === warea && dis > (d2.max / 2)) {                        dot.x -= xc * 0.03;                        dot.y -= yc * 0.03;                    }                    // 计算距离比                    ratio = (d2.max - dis) / d2.max;                    // 画线                    ctx.beginPath();                    ctx.lineWidth = ratio/2;                    ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';                    ctx.moveTo(dot.x , dot.y);                    ctx.lineTo(d2.x , d2.y);                    ctx.stroke();                }            }            // 将已经计算过的粒子从数组中删除            ndots.splice(ndots.indexOf(dot), 1);        });        var RAF = (function(){        return window.requestAnimationFrame ||               window.webkitRequestAnimationFrame||               window.mozRequestAnimationFrame||               window.oRequestAnimationFrame ||                window.msRequestAnimationFrame ||                function (callback) {                  window.setTimeout(callback, 1000 / 60);               }        })();        RAF(animate);    }

这时候我们的项目也就彻底完成了，让每一个小点随机运动，并且可以让鼠标移动的时候，小点也一起运动。

3.后记

Canvas 是一个非常强大的功能，并且能够很高效的处理大量的动画，希望回头小伙伴们也能多多学习。

接下来是我们今日代码的源码：

Canvas 连线效果

之后再和大家分享一个 Canvas 的粒子效果。

仓库连接依旧是上面的 GIT仓库。

那好，今天的文章就先写到这里了，回头欢迎大家留言点赞，打赏，丢香蕉给我。

1 0