开源造轮子,璀璨的决不不要的canvas粒子运动插件库

By admin in 4858美高梅 on 2019年4月18日

一:开篇

哈哈哈,谢谢标题党的亲临~

就算如此标题有点夸大的认为,但实际上,插件库确实是轻松,高效,轻量级,璀璨炫耀的咯。废话不多说,先来看个标配例子吗:

4858美高梅 1

(codepen在线演示编辑:)

是啊,应该是酷炫炫耀的吗,不喜欢的话能够向下看越多的例子哦~

一:开篇

哈哈,多谢标题党的亲临~

纵然标题有点夸大的感到,但实际,插件库确实是轻巧,高效,轻量级,炫丽炫丽的嘞。废话不多说,先来看个标配例子吗:

4858美高梅 2

(codepen在线演示编辑:)

是啊,应该是炫丽光彩夺目的啊,不希罕的话能够向下看更加多的例子哦~

开源造轮子:一个精简,高效,轻量级,炫人眼目的决不不要的canvas粒子运动插件库,炫丽canvas

 

 

 

一:开篇

嘿嘿,多谢标题党的亲临~

虽说标题有点夸张的以为,但骨子里,插件库确实是精简,高效,轻量级,炫丽炫人眼目的嘞。废话不多说,先来看个标配例子吗:

4858美高梅 3

(codepen在线演示编辑:

是吗,应该是酷炫炫丽的吧,不希罕的话能够向下看更加多的例证哦~

 向blog或网址中加多语法高亮展现的代码方法总计

二:说说我(们)的理念:

style=”font-family: "Microsoft YaHei"”>厌倦市场上杂乱,百花齐放,百鸟争鸣的繁荣景色,作者心憔悴… 
style=”font-family: "Microsoft YaHei"”>像作者那种头脑轻易,4肢也大致的人就符合轻便的API,轻松人和物
(。・_・)/~~开源造轮子,璀璨的决不不要的canvas粒子运动插件库。~
style=”font-family: "Microsoft YaHei"”>好吧,依然说回代码吧,API设计希翼 style=”font-family: arial, helvetica, sans-serif”>  style=”font-family: arial, helvetica, sans-serif”>"The Write Less, Do More" style=”font-family: "Microsoft YaHei"”>和 style=”font-family: arial, helvetica, sans-serif”>
Keep it Simple and Stupid" style=”font-family: "Microsoft YaHei"”>的款式, class=”diff”
style=”font-family: "Microsoft YaHei"”>拒绝绕弯子API,崇尚轻巧,简约!
就此您会跟小编一样,使用起那个插件会觉获得到很爽,很轻便,嘎嘎嘎~
不信看看接下去的持有机能展现。

二:说说我(们)的理念:

style=”font-family: "Microsoft YaHei"”>厌倦市集上杂乱,百花齐放,百鸟争鸣的繁荣景观,作者心憔悴… 
style=”font-family: "Microsoft YaHei"”>像作者那种头脑简单,四肢也简要的人就符合轻易的API,简单人和物
(。・_・)/~~~
style=”font-family: "Microsoft YaHei"”>好吧,依然说回代码吧,API设计希翼 style=”font-family: arial, helvetica, sans-serif”>  style=”font-family: arial, helvetica, sans-serif”>"The Write Less, Do More" style=”font-family: "Microsoft YaHei"”>和 style=”font-family: arial, helvetica, sans-serif”>
Keep it Simple and Stupid" style=”font-family: "Microsoft YaHei"”>的花样, class=”diff”
style=”font-family: "Microsoft YaHei"”>拒绝绕弯子API,崇尚简单,简约!
从而您会跟小编同样,使用起那些插件会认为到很爽,很轻松,嘎嘎嘎~
不信看看接下去的具备功用展示。

 

 

 

 

二:说说我(们)的理念:

厌倦市场上眼花缭乱,百花齐放,百鸟争鸣的繁荣景象,我心憔悴... 
像我这种头脑简单,四肢也简单的人就适合简单的API,简单人和物 (。・_・)/~~~
好吧,还是说回代码吧,API设计希翼 "The Write Less, Do More" 和 "Keep it Simple and Stupid" 的形式,拒绝绕弯子API,崇尚简洁,简约!
所以你会跟作者一样,使用起这个插件会感觉到很爽,很轻松,嘎嘎嘎~ 不信看看接下来的所有效果展示。

style=”font-family: "Microsoft YaHei"”>小说目录

  1. style=”font-family: "Microsoft YaHei"; font-size: 15px”>预备知识
  2. style=”font-family: "Microsoft YaHei"; font-size: 15px”>目标
  3. style=”font-family: "Microsoft YaHei"; font-size: 一5px”>第三类措施:嵌入
  4. style=”font-family: "Microsoft YaHei"; font-size: 一伍px”>第二类格局:外部引用
  5. style=”font-family: "Microsoft YaHei"; font-size: 一伍px”>第2类格局:忽略HTML和PHP

3:全部功用展现

style=”font-family: "Microsoft YaHei"”>近来插件库提供了三种特效:粒子冬日运动,波浪运动,雪花飘动特效。 
style=”font-family: "Microsoft YaHei"”>当然,配置不相同的API参数值,或然可以得到挺多差别的特效呢!
style=”font-family: "Microsoft YaHei"”>下边已经演示过标配的粒子冬季运动啦,下边演示前边两种。

三:全部机能浮现

style=”font-family: "Microsoft YaHei"”>近来插件库提供了二种特效:粒子严节运动,波浪运动,雪花飘落特效。 
style=”font-family: "Microsoft YaHei"”>当然,配置差异的API参数值,可能能够博得挺多分裂的特效呢!
style=”font-family: "Microsoft YaHei"”>上边已经演示过标配的粒子冬天运动啦,上面演示前边三种。

4858美高梅, 

 

1、波浪运动·标配

4858美高梅 4

(效果参考QQ电话,codepen在线演示编辑:)

js代码:

new Particleground.wave( '#demo', {
    num: 3,
    // 三条线依次的颜色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三条线依次的宽度
    lineWidth: [.5, .7, .9],
    // 三条线依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰(波纹)
    rippleNum: 2,
    speed: .1,
    // 隐藏填充,默认false
    fill: false,
    // 显示边框,即线条效果,默认true
    stroke: true
});

一经您波兰语能够的话,相信看属性名结合职能就大约知道配置是哪些意思啊,不然的话你能够看看官方网站对那多少个API的描述,戳那里哈。

一、波浪运动·标配

4858美高梅 5

(效果参考QQ电话,codepen在线演示编辑:)

js代码:

new Particleground.wave( '#demo', {
    num: 3,
    // 三条线依次的颜色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三条线依次的宽度
    lineWidth: [.5, .7, .9],
    // 三条线依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰(波纹)
    rippleNum: 2,
    speed: .1,
    // 隐藏填充,默认false
    fill: false,
    // 显示边框,即线条效果,默认true
    stroke: true
});

固然您英语能够的话,相信看属性名结合功用就大致知道配置是怎么着意思啊,不然的话你能够看看官方网址对那多少个API的叙述,戳这里哈。

3:所有机能呈现

目前插件库提供了三种特效:粒子无序运动,波浪运动,雪花飘落特效。 
当然,配置不同的API参数值,或许可以得到挺多不同的特效呢!
上面已经演示过标配的粒子无序运动啦,下面演示后面两种。

  近日在写代码时相遇一个主题素材,正是何等让代码像在IDE或正式编写翻译器同样能够高亮展现在网页或博客中(如下图显示),上网查了大多资料,上面是自己对读书到的方式的归结总括。

 

 

一、波浪运动·标配

4858美高梅 6

(效果参考QQ电话,codepen在线演示编辑:

js代码:

new Particleground.wave( '#demo', {
    num: 3,
    // 三条线依次的颜色
    lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
    // 三条线依次的宽度
    lineWidth: [.5, .7, .9],
    // 三条线依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三条线都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三条线依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三条线都只有两个波峰(波纹)
    rippleNum: 2,
    speed: .1,
    // 隐藏填充,默认false
    fill: false,
    // 显示边框,即线条效果,默认true
    stroke: true
});

即使您阿拉伯语能够的话,相信看属性名结合职能就大概知道配置是怎么样看头啊,不然的话你能够看看官方网站对那多少个API的叙述,戳那里哈。

 

二、波浪运动·loading动画

 4858美高梅 7

(codepen在线演示编辑:)

本条js代码就不贴啦,供给协调写加载的速度,然后设置到职能上哈。

二、波浪运动·loading动画

 4858美高梅 8

(codepen在线演示编辑:)

本条js代码就不贴啦,要求自个儿写加载的进度,然后设置到效果上哈。

 

4858美高梅 9

 

 

贰、波浪运动·loading动画

 4858美高梅 10

(codepen在线演示编辑:

本条js代码就不贴啦,要求协调写加载的快慢,然后设置到成效上哈。

 

三、雪花飘落特效

4858美高梅 11

(codepen在线演示编辑:)

极简单的js代码:

new Particleground.snow('#demo');

三、雪花飘飘特效

4858美高梅 12

(codepen在线演示编辑:)

极简单的js代码:

new Particleground.snow('#demo');

 

  上边包车型地铁章程好些个都以运用第二方javascript插件完毕的,因而不必忧虑方法有多难,只要拿过来使用就足以了。在讲述方法在此以前先介绍一下与之规范:

 

 

三、雪花飘动特效

4858美高梅 13

(codepen在线演示编辑:

极轻巧的js代码:

new Particleground.snow('#demo');

 

4:解释标题

style=”font-family: "Microsoft YaHei"”>好啊,效果看完啦,以后解释一下标题标那三个宣传字眼,尽管看似并从未怎么用4858美高梅 14

四:解释标题

style=”font-family: "Microsoft YaHei"”>好啊,效果看完呀,今后解释一下题指标那几个宣传字眼,即便接近并从未怎么用4858美高梅 15

 

居安思危知识

简洁:
  • 就好像后边的粒子运动例子,只需求一行简单的代码 new Particleground.particle('#demo') 就足以兑现啦。

  • 然后就是“洁”:那么些必要阅读源码咯,相信从源码中您会看出代码的轻易优雅的,现实请戳这里呀~

  • 理所当然,特效也是精简美观的呐,对不起视觉的效益为何还要用代码去贯彻它吧4858美高梅 16

简洁:
  • 就好像前边的粒子运动例子,只必要1行简单的代码 new Particleground.particle('#demo') 就足以兑现啊。

  • 然后正是“洁”:那些必要阅读源码咯,相信从源码中你会看出代码的简短优雅的,实际请戳那里呀~

  • 自然,特效也是轻巧雅观的呀,对不起视觉的机能为何还要用代码去落到实处它吧4858美高梅 17

四:解释标题

好啦,效果看完啦,现在解释一下标题的那几个宣传字眼,虽然好像并没有什么用...
  • HTML和CSS的基本知识
高效:
  • 在作者的力量基础之上,代码能优化的地点笔者都想尽了办法去优化它(包含质量的优化,代码的简化)。

  • 譬如:this关键字的在另一个函数内储存成变量参数使用,多次运用到的吃水属性或艺术储存成变量使用,既达到收缩时可削减体积,又到达减少变量查找的耗费时间。

  • 譬如说:粒子冬辰运动的连线功用处理,嵌套for循环,O(n²)的标题,作者优化了3遍(git
    commit有记录咯),最终选拔(学习借鉴)了《HTML伍+JavaScript动画基础》那本书的3个钻探和优化措施,到达既不冗余代码或占有内部存款和储蓄器,又进步了一倍的施行作用。具体可点击那里,源码第260行啊。

高效:
  • 在作者的力量基础之上,代码能优化的地点小编都想尽了法子去优化它(包涵品质的优化,代码的简化)。

  • 比如:this关键字的在另八个函数内储存成变量参数使用,多次使用到的深浅属性或艺术储存成变量使用,既达到收缩时可减掉体量,又达到收缩变量查找的耗时。

  • 譬如说:粒子冬季运动的连线功能处理,嵌套for循环,O(n²)的主题材料,我优化了二次(git
    commit有记录咯),最终动用(学习借鉴)了《HTML5+JavaScript动画基础》那本书的贰个构思和优化措施,到达既不冗余代码或挤占内部存款和储蓄器,又进步了壹倍的进行功效。切切实实可点击那里,源码第260行啊。

简洁:
  • 就像是前边的粒子运动例子,只要求一行轻松的代码 new Particleground.particle('#demo') 就能够达成啊。

  • 接下来就是“洁”:那些必要阅读源码咯,相信从源码中你会见到代码的简洁优雅的,具体请戳这里呀~

  • 当然,特效也是轻便美观的呀,对不起视觉的效果为什么还要用代码去落到实处它吗4858美高梅 18

目标

轻量级:
  • 由于前边聊起的两点,轻量级自然就孕育而生啦。

  • 另2个正是特效之间皆以以单身的插件方式利用的,不设有相互依赖的主题材料,只依靠3个共用的职能文件,那样就能够到达想加载什么就加载什么,按需加载的不臃肿体验啦,也能够偷懒直接使用带有全数特效的压缩包文件咯。

轻量级:
  • 出于前边说起的两点,轻量级自然就孕育而生啦。

  • 另三个正是特效之间都以以独立的插件情势利用的,不存在互相重视的难点,只依靠1个国有的作用文件,这样就可以直达想加载什么就加载什么,按需加载的不臃肿体验啦,也得以偷懒直接选择带有全数特效的压缩包文件咯。

高效:
  • 在作者的本领基础之上,代码能优化的地方小编都想尽了点子去优化它(蕴含品质的优化,代码的简化)。

  • 例如:this关键字的在另一个函数内储存成变量参数使用,多次用到到的深度属性或方法储存成变量使用,既达到减弱时可减弱年体育积,又达到收缩变量查找的耗费时间。

  • 例如:粒子冬季运动的连线功效处理,嵌套for循环,O(n²)的标题,我优化了3次(git
    commit有记录咯),最终动用(学习借鉴)了《HTML5+JavaScript动画基础》那本书的三个思索和优化措施,到达既不冗余代码或挤占内部存储器,又升高了壹倍的施行效用。具体可点击那里,源码第二60行哦。

  • 在博客或网页中让嵌入代码高亮呈现.
  • 在Wordpress中活动忽略HTML和PHP代码.

 

 

轻量级:
  • 由于前边谈到的两点,轻量级自然就孕育而生啦。

  • 另一个就是特效之间都以以单身的插件情势利用的,不设有互相重视的主题素材,只依靠1个公共的成效文件,那样就可以实现想加载什么就加载什么,按需加载的不臃肿体验啦,也能够偷懒直接使用带有全部特效的压缩包文件咯。

  方法主要有两类,一种是引进第3方的JavaScript和高亮语法插件,让pre和code标签中的代码高亮呈现,另1种艺术是间接嵌入主流网址的语法代码。

五:最后

  • 贰个名特别减价的官方网址及文书档案是三个非凡的起来,插件库官方网址:particleground.duapp.com,
    先用着这一个域名咯,等时机成熟了,再换回正式的 pjs.barrior.me 域名~

  • 进献总是受欢迎的,无论它多么大或小!只要你与我的价值观,思想,志同道合的话,那就太愿意您参预组织的胸怀啊,做壹件本人喜好的事,做三个温馨都爱好自身的人。

  • 比方您喜爱这几个插件库并能支持到您的实际工作中,希望它能开采进取的越来越好,提供更加多风趣实用的特效,辅助自个儿(们),烦请点个 Star 吧4858美高梅 19

 

五:最后

  • 3个完好无损的官方网站及文书档案是一个一石两鸟的始发,插件库官方网址:particleground.duapp.com,
    先用着这一个域名咯,等时机成熟了,再换回正式的 pjs.barrior.me 域名~

  • 孝敬总是受欢迎的,无论它多么大或小!只要您与作者的价值观,观念,志同道合的话,那就太希望你参与球协会会的怀抱啊,做1件本人喜欢的事,做一个祥和都欣赏自个儿的人。

  • 纵然您欢乐那一个插件库并能帮忙到你的实际上中国人民解放军海军工程高校业作中,希望它能开采进取的更加好,提供越多风趣实用的特效,帮衬作者(们),烦请点个 Star 吧4858美高梅 20

 

 

 

五:最后

  • 二个好好的官网及文书档案是1个好好的开首,插件库官方网站:particleground.duapp.com,
    先用着这几个域名咯,等时机成熟了,再换回正式的 pjs.barrior.me 域名~

  • 进献总是受欢迎的,无论它多么大或小!只要你与作者的古板,思想,志同道合的话,那就太希望你加入协会的怀抱啦,做1件自身喜爱的事,做一个团结都喜爱本身的人。

  • 假如你喜欢那一个插件库并能协助到您的实在工作中,希望它能发展的更加好,提供更加多有趣实用的特效,扶助我(们),烦请点个 Star 吧4858美高梅 21

 

一:开篇 哈哈哈,谢谢标题党的光临~ 固然标题…


  

第三类措施:嵌入

 

  嵌入格局是最方便神速的,好多网址都提供了代码导出的法力,它可以自行引入专业网址的高亮代码呈现形式,赏心悦目大方。

 

GitHub
gist
 

应用格局:

<!DOCTYPE html>
<html>
<head>
    <title>github代码嵌入</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <style type="text/css">
       div{
           margin: 8px;
       }
    </style>
</head>
<body>
<h1>github代码嵌入</h1>
<div>
<script src="https://gist.github.com/dragonir/b3b43d791c259b597907069020f4b754.js"></script>
</div>
</body>
</html>

 

金玉满堂效益:

 4858美高梅 22

Codepen
pen

运用格局:

<!DOCTYPE html>
<html>
<head>
    <title>codepen代码嵌入</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
</head>
<body>
<h1>Codepen代码嵌入</h1>
<pre>
    <p data-height="265" data-theme-id="dark" data-slug-hash="MogbxY" data-default-tab="result" data-user="dragonir" data-embed-version="2" data-pen-title="MogbxY" class="codepen">See the Pen <a href="https://codepen.io/dragonir/pen/MogbxY/">MogbxY</a> by dragonir (<a href="https://codepen.io/dragonir">@dragonir</a>) on <a href="https://codepen.io">CodePen</a>.</p>
</pre>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</body>
</html>

   

贯彻效益:

 4858美高梅 23

4858美高梅 24

 


 

 

第壹类措施:JavaScript高亮插件

 

  通过引进代码高亮彰显插件,同样能够兑现博客以及别的网址放到代码的高亮展现,以下是二种主流的方法。笔者只呈现了主导的选择办法,想详细驾驭使用方式和接口,能够点击链接到官方网址。

 

Highlight.js  

选用格局:

<!DOCTYPE html>
<html>
<head>
    <title>网页嵌入代码语法高亮</title>
    <meta charset="utf-8">

    <!-- 
        <link rel="stylesheet" href="/path/to/styles/default.css"> 
        <script src="/path/to/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    -->

    <link rel="stylesheet" type="text/css" href="./highlight/styles/railscasts.css">
    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <script src="./highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Highlight.js</h1>
<pre>
    <code class="javascript">
        function selectionSort(arr){
            var minIndex, temp, len = arr.length;
            for(var i=0; i < len; i++){
                minIndex = i;
                for(var j=i+1; j < len; j++){
                    if(arr[j] < arr[minIndex]){
                        minIndex = j;
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }
        var num = new Array;
        num = [1,5,2,8,4,9,3,0,4];
        console.log(selectionSort(num));
    </code>
</pre>


</body>
</html>

 

兑现效益:

 4858美高梅 25

 

Prism.js

动用方式:

<!DOCTYPE html>
<html>
<head>
    <title>prism.js</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <link rel="stylesheet" type="text/css" href="./prism/prism.css">
    <script src="./prism/prism.js"></script>
</head>
<body>
<h1>prism.js</h1>
<pre>
    <code class="language-javascript">
        function selectionSort(arr){
            var minIndex, temp, len = arr.length;
            for(var i=0; i < len; i++){
                minIndex = i;
                for(var j=i+1; j < len; j++){
                    if(arr[j] < arr[minIndex]){
                        minIndex = j;
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }
        var num = new Array;
        num = [1,5,2,8,4,9,3,0,4];
        console.log(selectionSort(num));
    </code>
</pre>


</body>
</html>

  

福寿绵绵效益:

 4858美高梅 26

 

Google
Prettify
 

应用方式:

<!DOCTYPE html>
<html>
<head>
    <title>prettify.js</title>
    <meta charset="utf-8">

    <!-- 
    Include the script tag below in your document:
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    See Getting Started to configure that URL with options you need.
    Look at the skin gallery and pick styles that suit you. 
    -->

    <!-- 
    Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty-printed. 
    -->

    <link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
    <script src="./prettify/loader/run_prettify.js"></script>
</head>
<body>
<h1>prettify.js</h1>
<pre>
    <code class="prettyprint">
        function selectionSort(arr){
            var minIndex, temp, len = arr.length;
            for(var i=0; i < len; i++){
                minIndex = i;
                for(var j=i+1; j < len; j++){
                    if(arr[j] < arr[minIndex]){
                        minIndex = j;
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }
        var num = new Array;
        num = [1,5,2,8,4,9,3,0,4];
        console.log(selectionSort(num));
    </code>
</pre>
</body>
</html>

 

贯彻效益:

 4858美高梅 27

 


 

其3类措施:忽略HTML和PHP

 

  为了呈现HTML和PHP代码,浏览器必供给将突显的代码自动忽略,你能够应用在线转变工具 Free
Online HTML Escape
Tool
来改换你必要体现的HTML代码。纵然您是用的博客是wordPress的博客,WordPress
plugin
 能够兑现此作用,不过它不可能和Prism.js同时使用。

 


 

总结

  今后就在您的博客或网址中放置雅观的代码吧,借使您想询问越来越多立见成效的WordPress的意义,推荐访问this
is the resource for
you.

 

style=”font-family: "Microsoft YaHei"; font-size: 一伍px”>转发请标明出处:,作者:Dragonir
,欢迎转发。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有