HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>马赛克</title>
<style>
body{background:#000;}
canvas{background: #fff; margin-left:500px;}
</style>
<script>
window.onload = function(){
var cvs = document.getElementById('canvas1');
var cxt = cvs.getContext('2d');
var oImg = new Image();
oImg.src = '1.jpg';
oImg.onload = function(){
cxt.drawImage(this,0,0);
var imgData = cxt.getImageData(0,0,oImg.width,oImg.height);
var newImgData = cxt.createImageData(oImg.width,oImg.height);
var num = 10;//该参数指定马赛克格子的大小
var stepW = oImg.width/num;//一行内格子数
var stepH = oImg.height/num;//一列内格子数
for(var j=0;j<stepH;j++){
for(var i=0;i<stepW;i++){
//获取10*10方格内随机的一个颜色
var colors = getXY(imgData,i*num+Math.floor(Math.random()*num),j*num+Math.floor(Math.random()*num));
//让10*10方格的颜色都为随机色
for(var s=0;s<num;s++){
for(var t=0;t<num;t++){
setXY(newImgData,i*num+t,j*num+s,colors);
}
}
}
}
cxt.putImageData(newImgData,0,oImg.height+50);
}
}
function getXY(imgData,x,y){
var result = [];
result.push(imgData.data[(imgData.width*y+x)*4]);
result.push(imgData.data[(imgData.width*y+x)*4+1]);
result.push(imgData.data[(imgData.width*y+x)*4+2]);
result.push(imgData.data[(imgData.width*y+x)*4+3]);
return result;
}
function setXY(imgData,x,y,colors){
imgData.data[(imgData.width*y+x)*4] = colors[0];
imgData.data[(imgData.width*y+x)*4+1] = colors[1];
imgData.data[(imgData.width*y+x)*4+2] = colors[2];
imgData.data[(imgData.width*y+x)*4+3] = colors[3];
}
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>
HTML5自学笔记[ 21 ]canvas绘图实例之马赛克的更多相关文章
- HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
随机推荐
- SUSE Linux Enterprise Server 设置IP地址、网关、DNS
说明: ip:192.168.21.172 子网掩码:255.255.255.0 网关:192.168.21.2 dns:8.8.8.8 8.8.4.4 1.设置ip地址 vi /etc/syscon ...
- 编写一个类A，该类创建的对象可以调用方法f输出小写的英文字母表。然 后再编写一个A类的子类B，要求子类B必须继承类A的方法f（不允许重写）， 子类B创建的对象不仅可以调用方法f输出小写的英文字母表，而且可以调用子 类新增的方法g输出大写的英文字母表。最后编写主类C，在主类的main方法 中测试类A与类B。
package zimu; public class A { public void f() { for (int i = 97; i <123; i++) { System.out.print ...
- Windows平台安装Redmine2.5.x
安装准备 下载RubyInstaller和Development Kit,也可以使用RailsFTW,轻松搞定windows下的安装. 下载MySql 下载mysql-connector-c-noin ...
- ODBC连接mysql
配置/etc/odbc.ini 执行命令:isql freeswitch freeswitch 123456 -v 第一个报错: [08S01][unixODBC][MySQL][ODBC 5.3(w ...
- virtualenv -- python虚拟沙盒（linux版本）
有人说:virtualenv.fabric 和 pip 是 pythoneer 的三大神器. 不管认不认同,至少要先认识一下,pip现在倒是经常用到,virtualenv第一次听说,不过,总得尝试一下 ...
- sequenza细胞纯度计算
安装sequenza bam文件要放在前面,否侧会-f命令可能识别错误 samtools mpileup a.bam -f hg19.fasta -Q 20 |gzip > normal.pil ...
- [Effective Java]第七章 方法
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- How to run an manually installed program from terminals in Linux / Ubuntu
Say we have installed qt programs and we want to run qtcreator from the command line. What we need h ...
- Java 实现阶乘算法
阶乘算法如下: 以下列出 0 至 20 的阶乘: 0!=1,(0 的阶乘是存在的) 1!=1, 2!=2, 3!=6, 4!=24, 5!=120, 6!=720, 7!=5040, 8!=40320 ...
- c++操作io常见命令
用c++练习下 系统常见io命令. 1)显示文档的文本 2)统计文本单词数字 3)列出目录所有文件 ,递归思路 4)查找第一个匹配的字符. 5)文本单词排序, 快速排序,其实还是递归思路 6)文本单词 ...