知乎背景图 canvas 效果

时间：2022-09-06 17:58:38

思路分析: 
1.创造一块画布, 
2.在画布内随机产生一些小球,小球位置,半径,颜射,大小,速度等都可以随机产生, 
3.定义画小球函数与小球移动函数, 
4.将每一个小球圆心都与其它小球链接, 
5判断每一个小球间的距离,大于一个值的时候断开连线,

创建一块画布

<body>

<canvas id="canvas" width="1500" height="1000" style="border: 1px solid red;"></canvas>

</body>

在script内获取

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext('2d'); //因为是平面的,所以写2d

产生各种随机变量

首先定义一个产生随机数的函数,然后我们可以通过调用这个函数来产生想要的随机变量!

function rand(min, max) {

return parseInt(Math.random() * (max - min + 1) + min);

}

产生随机变量函数

function Round() {

            //随机大小

            this.r = rand(5, 20);

            //随机位置

            var x = rand(this.r,canvas.width - this.r);//仿制超出右边界

            this.x = x<this.r ? this.r:x;

            var y = rand(this.r,canvas.height - this.r);

            this.y = y<this.r ? this.r:y;

            //随机速度

            var speed = rand(1, 3);

            this.speedX = rand(0, 4) > 2 ? speed : -speed;

            this.speedY = rand(0, 4) > 2 ? speed : -speed;

        }

这里定义了一个Round函数,首先是随机出小球的半径,然后随机位置,其中

var x = rand(this.r,canvas.width - this.r);
  • 1
  • 1

的意思是定义一个变量x(作为小球圆心的x坐标).小球的位置取决于画布的大小,因为不能让小球超出画布,然后又要让每一个小球可以完全显示在画布内,所以给小球定一个范围,分别在画布左右两侧减掉小球的半径,这样就可以确保小球不会超出左右边界.

this.x = x<this.r ? this.r:x;
  • 1
  • 1

是给小球左边界做判断,当x的值小于半径时,就意味着小球不能完全显示,所以让x的值等于半径. 
随机速度的代码块

var speed = rand(1, 3);

this.speedX = rand(0, 4) > 2 ? speed : -speed;

this.speedY = rand(0, 4) > 2 ? speed : -speed;

第一行就是调用随机函数,在1~3中随机产生速度,后两行的意思是,在0~4间随机产生一个数,如果此数大于2,就给速度取负值,防止每一个小球都按照一个方向移动,

定义三个原型链,分别是画小球,移动,链接

Round.prototype.draw = function() {

                    ctx.fillStyle = 'rgba(200,200,200,0.5)';

                    ctx.beginPath();

                    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);

                    ctx.closePath();

                    ctx.fill();

                }

用canvas画球比较基础,

ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);

因为每次this.x, this.y, this.r的值都是随机产生,所以球的信息也不一样,

Round.prototype.move = function() {

                this.x += this.speedX/10;

                if (this.x > canvas.width  || this.x < 0) {

                    this.speedX *= -1;

                }

                this.y += this.speedY/10;

                if (this.y > canvas.height  || this.y < 0) {

                    this.speedY *= -1;

                }

            }

通过随机产生的速度来改变小球圆心的位置,从而小球跟随移动.然后做一个判断当圆心坐标大于画布宽度或小于0时,让速度取反,这样小球会改变运动轨迹,做反向运动.

Round.prototype.links = function(){

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

                    var l = Math.sqrt((ballobj[i].x - this.x)*(ballobj[i].x - this.x)+(ballobj[i].y - this.y)*(ballobj[i].y - this.y));

                    var a = 1/l *100;

                    if(l<250){

                    ctx.beginPath();

                    ctx.moveTo(this.x,this.y);

                    ctx.lineTo(ballobj[i].x,ballobj[i].y);

                    ctx.strokeStyle = 'rgba(200,200,200,'+a+')';

                    ctx.stroke();

                    ctx.closePath();

                    }

            }

            }

首先遍历每一个产生的小球,利用勾股定理计算出每一个小球间的距离,用于后期做连线判断,定义了一个变量a,a的作用是改变连线的透明度,这样就可以做到线越长越淡,最后断开,最后就是让小球相连接即可,

产生小球的函数

        var ballobj = [];

        function init() {

            for (var i = 0; i < 50; i++) {

                var obj = new Round();

                obj.draw();

                obj.move();

                ballobj.push(obj);

            }

        }

        init();

定义一个数组用于存放小球,通过循环产生50个小球,并把它们存放到数组中,

小球移动函数

function ballmove(){

            ctx.clearRect(0,0,canvas.width,canvas.height);

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

                var ball = ballobj[i];

                ball.draw();

                ball.move();

                ball.links();

            }

            window.requestAnimationFrame(ballmove);

        }

        ballmove();

首先清除画布,否则会有小球的运动轨迹出现,然后通过循环数组的长度,给数组内每一个小球元素调用方法,最后用动画帧处理ballmove函数即可.

全部代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="canvas" width="1500" height="1000" style="border: 1px solid red;"></canvas>

    </body>

    <script type="text/javascript">

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext('2d');

        function rand(min, max) {

            return parseInt(Math.random() * (max - min + 1) + min);

        }

        function Round() {

            //随机大小

            this.r = rand(5, 20);

            //随机位置

            var x = rand(0,canvas.width - this.r);//仿制超出右边界

            this.x = x<this.r ? this.r:x;

            var y = rand(0,canvas.height - this.r);

            this.y = y<this.r ? this.r:y;

            //随机速度

            var speed = rand(1, 3);

            this.speedX = rand(0, 4) > 2 ? speed : -speed;

            this.speedY = rand(0, 4) > 2 ? speed : -speed;

        }

        Round.prototype.draw = function() {

                    ctx.fillStyle = 'rgba(200,200,200,0.5)';

                    ctx.beginPath();

                    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);

                    ctx.closePath();

                    ctx.fill();

                }

            Round.prototype.links = function(){

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

//                  var ball = ballobj[i];

                    var l = Math.sqrt((ballobj[i].x - this.x)*(ballobj[i].x - this.x)+(ballobj[i].y - this.y)*(ballobj[i].y - this.y));

                    var a = 1/l *100;

                    if(l<250){

                    ctx.beginPath();

                    ctx.moveTo(this.x,this.y);

                    ctx.lineTo(ballobj[i].x,ballobj[i].y);

                    ctx.strokeStyle = 'rgba(200,200,200,'+a+')';

                    ctx.stroke();

                    ctx.closePath();

                    }

            }

            }

            Round.prototype.move = function() {

                this.x += this.speedX/10;

                if (this.x > canvas.width  || this.x < 0) {

                    this.speedX *= -1;

                }

                this.y += this.speedY/10;

                if (this.y > canvas.height  || this.y < 0) {

                    this.speedY *= -1;

                }

            }

        var ballobj = [];

        function init() {

            for (var i = 0; i < 50; i++) {

                var obj = new Round();

                obj.draw();

                obj.move();

                ballobj.push(obj);

            }

        }

        init();

        function ballmove(){

            ctx.clearRect(0,0,canvas.width,canvas.height);

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

                var ball = ballobj[i];

                ball.draw();

                ball.move();

                ball.links();

            }

            window.requestAnimationFrame(ballmove);

        }

        ballmove();

    </script>

</html>

知乎背景图 canvas 效果的更多相关文章

  1. 判断某个ImageView的背景图是否是已知的背景图相等

    if (ibtn.getDrawable().getConstantState().equals(getResources().getDrawable(R.mipmap.image).getConst ...

  2. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  4. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  5. js多张图片合成一张图，canvas&lpar;海报图，将二维码和背景图合并&rpar; -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

  6. texturepacker打包图片，场景切换时背景图有黑边

    在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...

  7. VS2013 图片背景&&num;183&semi;全透明背景图（转）

    Note: 1.xaml编辑器和个别的编辑器(如HTML的)因为是承载在VS的一个子窗口上,所以背景依然是黑色的. 2.该背景必须在VS实验环境下使用. 效果图: 1.准备工作 1.先准备Visual ...

  8. WPF Geometry&equals;&quot&semi;M0&comma;0 L1&comma;0 1&comma;0&period;1&comma; 0&comma;0&period;1Z&quot&semi; 画方格背景图

    此项目源码下载地址:https://github.com/lizhiqiang0204/Tile 方格效果: 前端代码如下: <Window x:Class="WpfApp1.Main ...

  9. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

随机推荐

  1. 1、CC2541蓝牙4&period;0芯片中级教程——基于OSAL操作系统的运行流程了解&plus;定时器和串口例程了解

    本文根据一周CC2541笔记汇总得来—— 适合概览和知识快速索引—— 全部链接: 中级教程-OSAL操作系统\OSAL操作系统-实验01 OSAL初探 [插入]SourceInsight-工程建立方法 ...

  2. SQL SERVER 批量插入记录

    --create function insertData(@count as int,@tsn as bigint,@id as int) --as --begin SET IDENTITY_INSE ...

  3. android 输出&period;txt 文本换行问题

    // 获取当前日期和时间 Calendar cal = Calendar.getInstance(); String fileName = cal.get(Calendar.YEAR) + &quot ...

  4. HDU3657Game（最大流）

    这几天敲了几道最大流的问题,发现网络流真是模板算法啊.... 敲来敲去敲了几遍,基本每遍都敲得让人灰心,但同时也感受到了网络流的强大所在,这是我做网络流的第一题,,本以为看了一遍小白书的代码差不多理解 ...

  5. mssql 查询效率

    (1)临时表.表变量 据说:当数据量<100行数据时使用表变量,数据量较大时使用临时表(可创建索引提高查询效率). 表变量只能创建主键或唯一索引,准确讲是约束不是索引. (2)存储过程直接在查询 ...

  6. js中的this指向

    1, 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ alert(this); } sayHello( ...

  7. Fum uc M-R ko P&&num;39&semi;s R

    Milr-Rabin Dodod Avlo se \(n-1\) e \(u\cdot 2^t\). hen goch'n Toizz lme \([1,n-1]\) e \(l\). cak fe ...

  8. K2项目开发流程

    (自己的学习资料) K2项目开发流程: 1.在VS2013中设计流程,并在K2 Workspce中测试流程 首先是新建新建一个k2的Process文件..kprx后缀. 在里面创建所需要的流程.由于我 ...

  9. java重定向与请求转发的区别

    最近工作不算太忙,今天在这里对java中的重定向和请求转发稍作总结,希望能帮助到大家. 请求转发: request.getRequestDispatcher().forward(); 重定向: res ...

  10. MapReduce C&plus;&plus; Library

    MapReduce C++ Library for single-machine, multicore applications Distributed and scalable computing ...

相关文章