基于webGL的云层动画js插件

当前位置:主页 > Html5库 > html5 canvas > 基于webGL的云层动画js插件
基于webGL的云层动画js插件
分享:

    插件介绍

    这是一款基于webGL的云层动画js插件。该插件使用HTML5 canvas 和 WebGL API,生成可控制的多层云彩动画特效。

    浏览器兼容性

    浏览器兼容性
    时间:2019-07-18
    阅读:
简要教程

这是一款基于webGL的云层动画js插件。该插件使用HTML5 canvas 和 WebGL API,生成可控制的多层云彩动画特效。

NPM安装

npm install klouds --save                  
                

使用方法

ES6语法:

import * as klouds from 'klouds'                  
                

在页面中引入下面的文件。

<!-- 纯 JavaScript -->
<script src="lib/klouds.min.js"></script>

<!-- jQuery插件 -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="lib/klouds.min.js"></script>
                
HTML结构
<canvas id="myClouds"></canvas>
                
初始化插件
// vanilla javascript
klouds.create({
  selector: '#myClouds'
});

// jQuery plugin
$(function(){
  $('#myClouds').Klouds();
});
                
API
const instance = $('#myClouds').Klouds();

// start the animation
instance.start()

// stop the animation
instance.stop()

// get the current animation speed
instance.getSpeed()

// set the animation speed
instance.setSpeed(speed) 

// get the number of cloud layers
instance.getLayerCount()

// set the number of cloud layers
instance.setLayerCount(count)

// get the background color
instance.getBgColor()

// set the background color
instance.setBgColor(color)

// get the color 1
instance.getCloudColor1()

// set the color 1
instance.setCloudColor1(color)

// get the color 2
instance.getCloudColor2()

// set the color 2
instance.setCloudColor2(color)                  
                

示例代码

var clouds = klouds.create({
  selector: '#my-cloud-canvas',
  speed: 5,
  layerCount: 7,
  bgColor: 'white',
  cloudColor1: 'white',
  cloudColor2: 'red'
})

// later you could for example changed the speed
clouds.setSpeed(10)                  
                

该基于webGL的云层动画js插件的github网址为:https://github.com/skyrim/klouds