当前位置：首页 > 网页特效 > canvas

HTML5 Canvas炫酷宇宙黑洞引力特效

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该插件使用一个div作为canvas的占位容器即可。

```html
<div id="canvas_placeholder"></div>     
```           
#####  创建调用
调用该插件之前首先要引入必要的依赖文件。

```html
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.js"></script>
<script src="./black-hole.min.js"></script>   
```             
然后可以通过下面的方法来调用该黑洞特效插件。

```html
<script>
  var corsOkImageUrl = 'https://s3-us-west-2.amazonaws.com/ccrosland-share-bucket/black-hole/milkyway.jpg';
  BlackHole.blackHoleifyImage('canvas_placeholder', corsOkImageUrl)
</script>      
```          
你也可以指定一些参数来改变黑洞引力效果。

```html
<script>
  BlackHole.blackHoleifyImage(placeholderId, corsOkImageUrl, {
    distanceFromBlackHole: 70, // 80 is default
    polynomialDegree: 3, // 2 is default
    numAngleTableEntries: 2000, // 1000 is default. More might improve quality but impact performance
    fovAngleInDegrees: 60, // 73 is default. Yeah, it's an unusual choice, but it just looked cool, ok?
  });
</script>   
```

web299.com

HTML5 Canvas炫酷宇宙黑洞引力特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果