用canvas的像素操作做了一个简单的马赛克效果。主要是利用的canvas中的一些有关像素的函数,思路很简单,就是将马赛克盒子中的所有像素都设置成相同的,设置的数据可以从马赛克盒子范围内随机选取一个单像素的数据。因为canvas中没有直接操作单像素的函数,所以要自己定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#mosaic{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: gray;
}
</style>