html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件

这是一款基于HTML5 canvas的图片马赛克js插件。该图片马赛克插件使用简单，可调整马赛克的大小，透明度等属性，适合用于制作一些特殊的图片效果。

基于HTML5 Canvas的纯JS图片马赛克效果

该马赛克插件可用的配置参数有

参数   默认值   描述

image   null   必选参数，图片元素的选择器

targetElement   null   必选参数，目标元素的选择器

tileWidth   5   组成马赛克div元素的宽度，单位像素

tileHeight   5   组成马赛克div元素的高度，单位像素

tileShape   'circle'   马赛克的形状，可以为：circle 或 rectangle

opacity   1   马赛克图片的透明度

width   null   必选参数，马赛克图片的宽度

height   null   必选参数，马赛克图片的高度

该插件参数的使用方法参考如下varphotomosaic = newPhotoMosaic({ image         : document.getElementById('image'), targetElement : document.getElementById('target'), width         : 500, height        : 500, tileHeight    : 16, tileWidth     : 16, tileShape     : 'rectangle', opacity       : 0.5})