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

photomosaic.js-基于Canvas的纯JS图片马赛克插件

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

简介

##### HTML结构
使用该图片马赛克插件需要一个img文件，生成的canvas可以放置在一个空的div中。

```html
<div>
  <img src="img/1.jpg" id='image' alt="">
</div>
<div>
  <div id='target'></div>
</div>   
```             
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该马赛克插件。

```html
var photomosaic = new PhotoMosaic({
  image         : document.getElementById('image'),
  targetElement : document.getElementById('target'),
  width         : 500,
  height        : 500
})         
```       
#####  配置参数
该马赛克插件可用的配置参数有：

|  参数 |  默认值 |  描述 |
| ------------ | ------------ | ------------ |
|image|null|必选参数，图片元素的选择器|
|targetElement|null|必选参数，目标元素的选择器|
|tileWidth|5|组成马赛克div元素的宽度，单位像素|
|tileHeight|5|组成马赛克div元素的高度，单位像素|
|tileShape|'circle'|马赛克的形状，可以为：circle 或 rectangle|
|opacity|1|马赛克图片的透明度|
|width|null|必选参数，马赛克图片的宽度|
|height|null|必选参数，马赛克图片的高度|
参数的使用方法如下：

```html
var photomosaic = new PhotoMosaic({
  image         : document.getElementById('image'),
  targetElement : document.getElementById('target'),
  width         : 500,
  height        : 500,
  tileHeight    : 16,
  tileWidth     : 16,
  tileShape     : 'rectangle',
  opacity       : 0.5
})          
```

web299.com

photomosaic.js-基于Canvas的纯JS图片马赛克插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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