HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
2024-10-20 05:44:52
<!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>
最新文章
- java并发编程(六)Runnable和Thread实现多线程的区别
- iOS-布局-Masonry
- YZM的全排列
- hdu 4622 Reincarnation trie树+树状数组/dp
- http://www.360doc.com/content/10/1012/09/3722251_60285817.shtml
- 在线LCA模板
- windows计划任务
- 淘宝网站上的 HTTP 缓存问题两则
- 设计模式---状态变化模式之state状态模式(State)
- 在static的function静态函数中访问成员变量
- 6. 支持向量机(SVM)核函数
- Oracle 11gR2 ORA-12638 身份证明检索失败解决方法
- QT中VideoProbe的简介和实现
- 日志收集之nxlog
- iDempiere 使用指南 系统安装 以及 virtualbox虚拟机下载
- 七. 多线程编程2.Java线程模型
- c的详细学习(7)指针学习(一)
- shell脚本之前的基础知识
- 一个关于集合的问题,为什么添加进List集合中的元素被莫名其妙的改变了
- python socket非阻塞及python队列Queue
热门文章
- Oracle中如何使用REGEXP_SUBSTR函数
- Music Player团队项目(一)
- NoSQL聚合数据模型
- 【T-SQL系列】常用函数—聚合函数
- [转] Android获取Manifest中<;meta-data>;元素的值
- Nofollow
- Myeclipse 主题下载
- [转载] Codis作者黄东旭细说分布式Redis架构设计和踩过的那些坑们
- bootstrap学习笔记<;八>;(bootstrap核心布局风格——栅格系统)
- poj3449Geometric Shapes