【被玩坏的博客园】之canvas装饰博客园侧边栏

最新推荐文章于 2021-02-28 17:12:10 发布
最新推荐文章于 2021-02-28 17:12:10 发布
阅读量201 收藏 1
点赞数
原文链接：http://www.cnblogs.com/hongrunhui/p/7856380.html
版权

 

 

最近抽空学了学canvas,然后用canvas做了个小球运动的demo,大致的效果如下：

虽然网上已经有很多这样的demo,但是还是想根据自己的思路来写一个，下面先跟大家讲解一下源代码，先看html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      html, body {
          padding: 0;
          margin: 0;
          width: 100%;
          height: 100%;
      }
      canvas {
        background-image: linear-gradient(-50deg,RGB(255, 106, 100),RGB(71, 0, 182));/*对canvas做背景颜色渐变处理，第一个参数是角度，后面2个是起始颜色，这个我就不细讲了，查查就知道*/
      }
  </style>
</head>
<body>
  <canvas id="canvas">
    
  </canvas>
  <script src="./index.js"></script>
</body>

</html>

html很简单，没啥讲的，就是css那块兼容性你们注意下就好（我懒，没写兼容），再看看canvas的js处理代码，就是上面引入的index.js(讲解都写在注释里了，写的比较基础，方便没多少基础的人看)：

window.onload = function(){// 页面加载完了之后再处理
    var canvas = document.getElementById('canvas');
    var body = document.getElementsByTagName('body')[0];//getElementsByTagName是以标签名获取元素，返回是一个数组，所以用[0]
    canvas.width = body.clientWidth;// 获取body的【客户端宽度】，这个时候body已经加载完成了，页面大小已经形成。
    canvas.height = body.clientHeight;
    var bound = canvas.getBoundingClientRect();// 这个叫做获取边界客户端矩形，可以用来获取canvas的长宽
    var ctx = canvas.getContext('2d');// 获取canvas的上下文环境（可以理解为买下一个画笔）
    var width = bound.width, height = bound.height;
    var circleConfig = {// 配置信息
        ballNums: 300,// 球的数量
        fillColor: 'rgba(255, 255, 255, .5)',// 球的填充颜色
        radius: 1// 球的半径
    };
    var circle = new Circle(circleConfig);// 初始化球
    circle.init();// 初始化
    var zoom=function(e){ // 这个函数是用来缩放球的大小的，简单做了个缩放改变球的效果，目前可能就在chrome下有用
          var e = e || window.event; 
          if (!e.deltaX) {// 缩放的时候这个值是为0或-0的
              if (e.deltaY < 0) {// 小于0好像是放大吧
                if (circleConfig.radius) {
                    circleConfig.radius = null;
                    var circle = new Circle({
                        ballNums: 300,
                        fillColor: 'rgba(255, 255, 255, .5)',
                        // radius: 1
                    });
                    circle.init();
                }
                
              }
              else {
                if (!circleConfig.radius) {
                    circleConfig.radius = 1;
                    var circle = new Circle({
                        ballNums: 300,
                        fillColor: 'rgba(255, 255, 255, .5)',
                        radius: 1
                    });
                    circle.init();
                }
              }
          }
          if(e.wheelDelta && event.ctrlKey){// 禁止网页缩放
               event.returnValue = false
          }else if(e.detail){
              
               event.returnValue = false;
          } 
    }  
    if(document.addEventListener){ 
        document.addEventListener('DOMMouseScroll' , zoom , false); // 兼容火狐
    }
    window.onmousewheel = document.onmousewheel = zoom;// 除火狐之外的浏览器
    function Circle(o) {// 好了，这里才是故事真正开始的地方
        o = o || {};
        this.instance = [];// 可以理解为实例数组，用来存球的
        this.maxLineLength = o.maxLineLength || 100;// 最大线长度，就是2个球在这个距离内会在之间画根线
        function Ball() {
            this.radius = o.radius || (o.MaxRadius || 20) * Math.random();
            this.startDeg = 0;// 开始角度
            this.endDeg = Math.PI * 2;// 终结角度
            this.clockWay = false; // 顺时针还是逆时针
            this.fillColor = o.fillColor || randomColor();// 填充颜色
            this.borderColor = 'transparent';// 球的border设置为透明的不然难看
            this.dirX = 1;// 球的水平方向（控制正反）
            this.dirY = 1;// 如上
            this.speed = o.speed || 1 * Math.random() - 0.3;// 球的移动速度
            this.X = getRandom(width);// 这里是初始化球的起始位置，值是0-width
            this.Y = getRandom(height);
            this.resetDir = function() {// 控制方向
                // X的位置如果小于半径或者大于canvas的宽度-半径就改变方向，Y同理
                if (this.X < this.radius || this.X > width - this.radius) {
                    this.dirX = -this.dirX;
                }
                if (this.Y < this.radius || this.Y > height - this.radius) {
                    this.dirY = -this.dirY;
                }  
            };
            this.init = function() {// 球的初始化
                this.move();
            };
            this.move = function() {// 这个就是移动球，每执行一次就检查方向和改变XY的带系喔啊
                this.resetDir();
                this.X += this.dirX * this.speed;// 移动
                this.Y += this.dirY * this.speed;
            };
            
        }
        this.ball = {

        };
        this.arc = function() {// 画圆函数
            // ctx.translate(this.X, this.Y);
            for (var i = 0; i < this.instance.length; i++) {
                var ball = this.instance[i];// 从实例数组中取出来
                // ctx.save();// 保存状态
                ctx.fillStyle = ball.fillColor;// 球的填充颜色 (准备好填充颜料)
                ctx.strokeStyle = ball.borderColor;// 球的线就是border（理解为准备好颜料）
                ctx.beginPath();// 开始路径，可以理解为拿起画笔
                ctx.arc(ball.X, ball.Y, ball.radius, ball.startDeg, ball.endDeg, this.clockWay);// 画圆
                ctx.fill(); // 填充圆（就相当于给圆上色）
                ctx.closePath();// 放下笔
                // ctx.restore();
                for(var j = i + 1; j < this.instance.length; j++) {
                    var s = Math.pow(ball.X - this.instance[j].X, 2) + Math.pow(ball.Y - this.instance[j].Y, 2);
                        s = Math.sqrt(s);// 获取圆与圆之间的距离，x的平方加y的平方然后开根号，初中数学知识
                    if (s < this.maxLineLength) {// 判断什么时候可以画线
                        ctx.beginPath();
                        ctx.moveTo(ball.X, ball.Y);// 把笔移动到
                        ctx.lineTo(this.instance[j].X, this.instance[j].Y);// 画线到这个位置
                        ctx.strokeStyle = 'rgba(255, 255, 255, ' + (this.maxLineLength - s) / (this.maxLineLength * 1.3)+')';
                        // 上面是调整线的颜色
                        ctx.strokeWidth = 1;// 线宽
                        ctx.stroke();// 画
                        ctx.closePath();
                    }
                }
            }
        };
        this.draw = function() {
            ctx.clearRect(0,0,width,height);// 你要是把这个给注了你会发现不一样的世界
            this.arc();// 执行画圆函数
        };
        this.move = function() {
            for(var i = 0; i < this.instance.length; i++) {
                var ball = this.instance[i];
                ball.init();// 球的初始化函数，其实跟ball.move()是一样的，就是改变球的位置
                
            }
            this.draw();
            requestAnimationFrame(this.move.bind(this));// 这里用bind是强行改变move函数的上下文环境，不然在requestAnimationFrame中的this会变得
            // requestAnimationFrame 请求动画帧，可以理解为控制函数执行的频率（本来这里可以用递归执行，但是递归控制不了频率，会卡死页面的，setTimeout也可以实现类似的效果）
        };
        this.init = function() {
            for(var i = 0; i < o.ballNums; i++) {
                this.instance.push(new Ball()); // 初始化球               
            }
            this.move();
        };
        
    }
    function getRandom(s) {
        return Math.ceil(Math.random() * s);// 获取0 -（s-1）之间的值
    }
    function randomColor() {
        return 'rgba('+getRandom(255)+','+getRandom(255)+','+getRandom(255)+','+Math.random()+')';
    };
  };

 

写完之后，还是想把他应用起来的，所以我就想用来他装饰博客园的侧边栏，所以进到：

 

把上面的js改了改，插入到博客园页面：

 

完整代码如下：

 

<script>
var sideBar = document.getElementById('home');
      var canvas = document.createElement('canvas');
      canvas.id = 'canvas';
      sideBar.appendChild(canvas);
window.onload = function(){
    var canvas = document.getElementById('canvas');
    // var body = document.getElementById('home');
    var body = document.getElementsByTagName('html')[0];
    var header = document.getElementById('header');
    canvas.width = header.clientWidth;
    // canvas.height = body.clientHeight;
    canvas.height = window.screen.height;
    var bound = canvas.getBoundingClientRect();
    var ctx = canvas.getContext('2d');
    var width = bound.width, height = bound.height;
    var submit = document.getElementById('btn_comment_submit');
    submit && submit.addEventListener('click', function() {
setTimeout(function() {
body = document.getElementsByTagName('html')[0];
canvas.height = window.screen.height;
var circle = new Circle({
        ballNums: 100,
        fillColor: 'rgba(255, 255, 255, .5)',
radius:1
    });
    circle.init();
},1000);
});
    var circle = new Circle({
        ballNums: 100,
        fillColor: 'rgba(255, 255, 255, .5)',
radius: 1
    });
    circle.init();
    function Circle(o) {
        o = o || {};
        this.instance = [];
        this.maxLineLength = o.maxLineLength || 100;
        function Ball() {
            this.radius = o.radius || (o.MaxRadius || 20) * Math.random();
            this.startDeg = 0;
            this.endDeg = Math.PI * 2;
            this.clockWay = false;
            this.fillColor = o.fillColor || randomColor();
            this.borderColor = 'transparent';
            this.dirX = 1;
            this.dirY = 1;
            this.speed = o.speed || 1 * Math.random() - 0.3;
            this.X = getRandom(width);
            this.Y = getRandom(height);
            this.resetDir = function() {
                if (this.X < this.radius || this.X > width - this.radius) {
                    this.dirX = -this.dirX;
                }
                if (this.Y < this.radius || this.Y > height - this.radius) {
                    this.dirY = -this.dirY;
                }  
            };
            this.init = function() {
                this.move();
            };
            this.move = function() {
                this.resetDir();
                this.X += this.dirX * this.speed;
                this.Y += this.dirY * this.speed;
            };
            
        }
        this.ball = {

        };
        this.arc = function() {
            // ctx.translate(this.X, this.Y);
            for (var i = 0; i < this.instance.length; i++) {
                var ball = this.instance[i];
                ctx.save();
                ctx.fillStyle = ball.fillColor;
                ctx.strokeStyle = ball.borderColor;
                ctx.beginPath();
                ctx.arc(ball.X, ball.Y, ball.radius, ball.startDeg, ball.endDeg, this.clockWay);
                ctx.fill(); 
                ctx.closePath();
                ctx.restore();
                for(var j = i + 1; j < this.instance.length; j++) {
                    var s = Math.pow(ball.X - this.instance[j].X, 2) + Math.pow(ball.Y - this.instance[j].Y, 2);
                        s = Math.sqrt(s);
                    if (s < this.maxLineLength) {
                        ctx.beginPath();
                        ctx.moveTo(ball.X, ball.Y);// 把笔移动到
                        ctx.lineTo(this.instance[j].X, this.instance[j].Y);// 画线到这个位置
                        ctx.strokeStyle = 'rgba(255, 255, 255, ' + (this.maxLineLength - s) / (this.maxLineLength * 1.3)+')';
                        // 上面是调整线的颜色
                        ctx.strokeWidth = 1;// 线宽
                        ctx.stroke();// 画
                        ctx.closePath();
                    }
                }
            }
        };
        this.draw = function() {
            ctx.clearRect(0,0,width,height);
            this.arc();
        };
        this.move = function() {
            for(var i = 0; i < this.instance.length; i++) {
                var ball = this.instance[i];
                ball.init();
                
            }
            this.draw();
            requestAnimationFrame(this.move.bind(this));
        };
        this.init = function() {
            for(var i = 0; i < o.ballNums; i++) {
                this.instance.push(new Ball());                
            }
            this.move();
        };
        
    }
    function getRandom(s) {
        return Math.ceil(Math.random() * s);
    }
    function randomColor() {
        return 'rgba('+getRandom(255)+','+getRandom(255)+','+getRandom(255)+','+Math.random()+')';
    };
  };
  
</script>

 

 

然后再调整下CSS代码，就可以达到我博客的左边侧边栏动画效果，如下：

 

canvas的源代码：https://github.com/lhlybly/canvas-circle，欢迎star

 

写在这里只是希望更多的人一起来学习，一起享受代码的作用，项目代码中还有很多优化的地方，欢迎大牛拍砖，也希望刚入门的人你呢个看懂，不懂可以留言问我。

PS: 抽空我会优化刚进页面左边白屏的问题 

转载于:https://www.cnblogs.com/hongrunhui/p/7856380.html

weixin_30369041
关注
博客园页面风格+代码块美化+分类+深色模式+Mac代码
作者的博客园已搬家到CSDN，访问博客园主页将默认跳转至CSDN
07-14 1767
博客园页面风格+代码块美化+分类+深色模式+Mac代码
博客园 页面定制CSS代码
qq_42052818的博客
02-18 5458
博客园 页面定制CSS代码        更新时间：2019-02-18        花了一点时间修改自己的博客背景设置，现在分享一下代码。希望对大家有帮助。我的比较简单，主要代码模板来源于另外一个博主，然后我在基础上进行了部分修改。原博主的连接：https://www.cnblogs.com/Penn000/p/6947472.html。 ...
博客侧边栏——装饰
weixin_33798152的博客
05-25 198
　设置方法，进入博客园后台，选择设置界面，在侧边栏下粘贴喜欢的装饰下的代码（需要支持html,js）。 来自： http://abowman.com/ <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamst...
博客园侧边栏美化及插件
weixin_30275415的博客
01-22 832
博客园侧边栏美化及插件 1.vp计数 http://www.amazingcounters.com 2.来源地图 http://clustrmaps.com 转载于:https://www.cnblogs.com/niuli1987/p/10306530.html
博客园左侧装饰
weixin_34068198的博客
06-18 124
有很多的博客朋友问起博客的左边的仓鼠。 今天想在这里做一个分享， 你可以再自己的后台的 设置 下的 博客侧边栏公告（支持HTML代码）填写以下代码。   &lt;div style="text-align:center"&gt;&lt;embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honeho...
博客园样式的设置系列-01-侧边栏和皮肤的设置
weixin_30687811的博客
10-25 219
1. 皮肤设置 、 可以使用自己定制的css.本人比较懒木有搞 这款还比较简洁 2.侧边栏的设置 <div id="myTime"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia...
博客园侧边栏皮肤美化
diaokangduan0885的博客
08-15 556
1、我的侧边栏皮肤代码格式 <!DOCTYPE html> <html> <body> <div class="head_img"><img width="250" height="180" alt="侧边栏图片" src="这里添加图片地址" class="img_avatar"><div> ...
博客园主题美化
weixin_30379911的博客
04-30 1947
-------------------siwuxie095 博客园主题美化 1、主题美化，顾名思义，其实就是对主题进行自定义。由于我之前在 博客园已经写了很多博文，用的是博客园官方提供的 BOOK 主题，贸 然更改其他已有主题，或者完全自定义一个新的主题，都有可能导致原 有博文格式的崩塌 故 ...
其他：博客园页面美化
SkeletonKing233的博客
02-20 645
看了其他大佬的博客园页面都那么好看，我也决定美化一下自己的博客园，顺便在这里分享一下我的博客园页面美化的方法。这里我选用的模版是SimpleMemory。
java代码画樱花飘落_一行代码引入博客园樱花飘落特效
weixin_39851918的博客
02-28 3218
前言博客园作为面向大众的博客, 个性新颖可以博得一赞, 简约美观也不失阅读体验, 本文对樱花特效js进行了解读, 发现作者的设计确实秒不可言, 即使没有注释, 思路展示的也很清晰. 那就废话不多说, 开始解读樱花特效js代码吧.起步拥有博客园账号开通js权限在博客侧边栏公告(支持HTML代码) (支持 JS 代码)加入下面1行代码便可以拥有同博主的樱花特效.解读//樱花 Quaint 修改版var...
博客园（自定义导航栏）
weixin_34348174的博客
05-16 889
       　　上一篇：博客园美化大全  在上一篇博客中已经介绍了 自动生成目录、返回顶部、爱心特效、添加github图标、扩大和缩小、设置签名、添加分享和推荐反对功能，这一篇介绍怎么自定义导航栏。  效果如下：   1.1.自定义导航栏  我的博客皮肤用的是AnotherEon001,假如你的博客用的是其它皮肤，样式需要自己修改，要想达到一样的效果，建议也用同款皮肤  ...
博客样式(旋转的立方体)
weixin_34013044的博客
08-18 159
代码: 1 <style> 2 /*最外层容器样式*/ 3 .wrap { 4 width: 100px; 5 height: 100px; 6 margin: 150px; 7 position: rela...
HTML5 装饰Canvas中图形
歪脖先生的博客
04-23 524
装饰图形Canvas为图形提供了一些默认样式，如线条、填充的默认颜色为黑色等。但是，这些默认样式无法满足所有用户的需求，也无法体现Canvas的灵活性，故Canvas为图形定义了一些属性，以便用户自定义图形的样式。线条的样式在绘制线段时，可以通过上下文对象的一些属性来控制线条的宽度、线条的颜色、线条连接点的样式、线帽样式等，各属性的含义见表 4‑2：表 4‑2 线条的样式属性及含义属性含义line...
在博客园主页添加侧边栏小插件
weixin_30888413的博客
03-04 566
一、在博客园主页添加小插件第一步：查看小插件的源代码 可以是——小仓鼠/池塘鱼.... 第二步：在博客园的设置栏，将小老鼠的代码复制粘贴首先如果想要添加 js 内容，需要先点击申请 js 的链接，申请成功后，页面会显示红框的字样，在把我们的小老鼠/池塘鱼 代码粘贴进去，点击保存，完毕！ <object type="application/x-shockwave-fla...
博客园侧边栏修改随笔分类为3D样式
weixin_30933531的博客
10-04 184
美化博客园页面 博客园侧边栏修改"随笔分类"样式，把以下代码放置博客侧边栏公告中 <!--云标签--><script src="http://files.cnblogs.com/mmzs/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script><script s...
前端HTML5中Canvas标签的介绍及基本使用（一）
Fancy_vae的博客
09-27 1843
一、canvas简介 ​ <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一
canvas的使用
廊坊吴彦祖
03-11 1431
canvas的使用 HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素，是众多广泛使用的网络 2D 图像渲染标准之一，可以用于绘制图表、制作图片构图或者制作动画 canvas 元素本身并没有绘制能力（仅仅是图形的容器），它公开了一个或多个渲染上下文，必须使用脚本来完成实际的绘图任务 canvas基本使用 相比于 img 元...
侧边菜单栏
janessssss的博客
11-23 2424
侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href=
canvas标签的简单用法
panxuncai的博客
01-28 668
HTML canvas标签的简单实例 -首先知道canvas它是一个HTML标签是一个画布，是一个容器，可以使用JavaScript对它进行操作。 用它之前先做一些基本步骤：&lt;canvas id="mycanvas" height="450" width="450"&gt;&lt;/canvas&gt;对这个标签取一个id var c = document.getElementById(“...
Android仿微信通讯录侧边栏实现教程：字母排序与索引功能
当用户在侧边栏上滑动选择字母时，`onDraw`方法会被调用，这里通过`canvas`绘制背景颜色和字母列表。 具体实现步骤可能包括以下几点： 1. 初始化`paint`对象用于绘制，以及设置`showBackground`布尔值控制背景颜色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值