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 ...
随机推荐
- C#操作oracle 到ExecuteNonQuery卡死不执行
方法1: 可能大家都解决了,我也遇到这个问题,c#更新卡住,但是plsql更新没问题.一直没找到答案,无意中想起,可能是oracle的表锁定了. 用下面的方法,顺利解锁保存了. SELECT /*+ ...
- block 实现原理（内存管理详解）（二）
在以前,MRC环境下,使用block很可能会出现内存泄漏问题,并且在以往的面试中,一些接触比较久的程序员都会喜欢问到这个问题,block内存泄漏的问题! 下面,我来介绍一下,MRC下Block内存泄漏 ...
- MSChart使用
制作报表的时候结果出现画红线处的信息太散, 如果没必要全部显示出来,我们可以使用这种效果: 注意和前面的区分,这个功能叫做Collect Pie Slices(收集分区) 要实现此功能,应先了解相关信 ...
- include_path详细解析
include_path详细解析 原文地址:http://www.laruence.com/2010/05/04/1450.html 1.php默认的包含路径为 .;C:\php\pear 即 ...
- HDU 5810 Balls and Boxes（盒子与球）
Balls and Boxes(盒子与球) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/O ...
- Apache-Shiro+Zookeeper系统集群安全解决方案之会话管理
如今的系统多不是孤军奋战,在多结点会话共享管理方面有着各自的解决办法,比如Session粘连,基于Web容器的各种处理等或者类似本文说的完全接管Web容器的Session管理,只是做法不尽相同. 而本 ...
- python_way ,day11 进程
if __name__ == '__main__': for i in range(10): p = Process(target=foo, args=(i,)) # p.daemon = True ...
- git原理图解
本文背景,在实际项目中使用git已有一年,发现不少同事虽然会使用常用git指令,但并不理解每个指令对应的作用原理.今天静下心总结下git 的基本理解:代码的存在区域:本文以实际项目出发,理清使用git ...
- Ubuntu 通过Deb安装 MySQL5.5(转载）
1. 下载 MySQL 5.5 deb 安装包 cd /usr/local/src sudo wget -O mysql-5.5.22-debian6.0-i686.deb http://dev.my ...
- 半平面交模板（O（n*n）&& O(n*log(n)）
摘自http://blog.csdn.net/accry/article/details/6070621 首先解决问题:什么是半平面? 顾名思义,半平面就是指平面的一半,我们知道,一条直线可以将平面分 ...