html5 canvas图片马赛克
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oc = document.getElementById('c1');
var ogc = oc.getContext('2d'); var yimg = new Image(); yimg.onload = function ()
{
draw(this);
}; yimg.src = 'img/5-5.jpg'; function draw(obj)
{
oc.width = obj.width;
oc.height = obj.height * 2;
ogc.drawImage(obj,0,0); var oimg = ogc.getImageData(0,0,obj.width,obj.height); var w = oimg.width;
var h = oimg.height; var num = 5; var newimg = ogc.createImageData(obj.width,obj.height); var stepw = w/num;
var steph = h/num; for(var i = 0; i < steph; i++)
{
for(var j = 0; j < stepw; j++)
{
var color = getXY(oimg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
for(var k = 0; k < num; k++)
{
for(var l = 0; l < num; l++)
{
setXY(newimg,j*num+l,i*num+k,color);
}
} }
} ogc.putImageData(newimg,0,obj.height);
} function getXY(obj,x,y)
{
var w = obj.width;
var h = obj.height;
var d = obj.data; var color = []; color[0] = d[ 4*(y*w+x)];
color[1] = d[ 4*(y*w+x) +1];
color[2] = d[ 4*(y*w+x) +2];
color[3] = d[ 4*(y*w+x) +3]; return color;
} function setXY(obj,x,y,color)
{
var w = obj.width;
var h = obj.height;
var d = obj.data; d[ 4*(y*w+x)] = color[0];
d[ 4*(y*w+x) +1] = color[1];
d[ 4*(y*w+x) +2] = color[2];
d[ 4*(y*w+x) +3] = color[3]; }
}
</script>
<style>
body{
background:pink;
}
#c1{
background:white;
}
</style>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
html5 canvas图片马赛克的更多相关文章
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- 导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
- HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas图片渐变
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片翻转
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas图片反色
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
随机推荐
- Introduction
http://www.entityframeworktutorial.net/EntityFramework5/entity-framework5-introduction.aspx Basics o ...
- DataGridView中的单元格提示错误信息
http://stackoverflow.com/questions/7713988/winforms-problems-validating-a-cell-in-a-datagridview
- 选错实施顾问公司 ERP项目九死一生
今天接到一个朋友的电话,他是一家企业老总.这位老总感到非常头疼的是他的企业选择了一款国际上名气很大的ERP软件,但实施效果却强差人意.他的疑问是"不是说只要选对了ERP产品,谁实施都能成功吗 ...
- Java生成可执行文件 & MANIFEST.MF问题 METAINFO
用 Intellij 进行打包.在File -> Project Structure里面. 然后应该会自动生成Jar包(也可以Build->Build Artifacts) xxx.jar ...
- 初识EasyUI
1.下载Jquery_EasyUI文档,将里面的spket-1.6.18.jar复制放到适合的位置(随意,不要有中文路径).使用命令行将其安装: 进入到文件目录下: 弹出安装界面选择下一步: 选 ...
- How can I work smarter, not just harder? Ask it forever
How can I work smarter, not just harder? 记住,永远要问自己这个问题.当你发现在做一件事情时,总是那么的繁琐无味,那么一定是出了什么问题. 如果一味地强调更加 ...
- [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...
- HDU 2610 (自己完全找不到思路) Sequence one
搜索虐我千百遍,我待搜索...好吧,我还木有初恋 题意: 我开始理解题意就理解偏了,Orz 题中有n个元素构成的序列,求出前p个非递减子序列.子序列是先按长度排序的,然后按原序列先后位置排序的. 这里 ...
- 51nod1244 莫比乌斯函数之和
推公式.f[n]=1-∑f[n/i](i=2...n).然后递归+记忆化搜索.yyl说这叫杜教筛?时间复杂度貌似是O(n 2/3)的? #include<cstdio> #include& ...
- Linux mv 命令的10个实用例子
当你想要将文件从一个位置移动到另一个地方并且不想复制它,那么mv 命令是完成这个任务的首选.本文中总结了十个Linux mv 命令的实例,希望能给大家带来一些帮助. 初识 mv 命令 mv 命令是一个 ...