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 ...
随机推荐
- SAP BASIS日常需要做的工作
SAP Basis的一些日常工作包括用户权限管理.集团管理.数据库管理.后台作业.打印管理.系统监控.传输管理等. a. 用户权限管理: SU01—创建,修改,显示用户信息 SU10—批量修改用户 P ...
- 一个关于echo的小知识点
一个关于echo的小知识点 echo一个布尔值时,如果是true,输出1,而如果是false,将什么都不输出! 网上搜的一个解释: 对于数字类型来说,false 确实 是 0, 而对strin ...
- Java_一些特殊的关键字详(?)解
1. native. 在看JDK源码时,想知道Math包里比如cos, sin等函数是如何实现的(猜想的是用他们在0点的泰勒展开式近似),但是打开之后却发现只有一个函数声明,并且有关键字native, ...
- oracle学习笔记——配置环境
题记:最近再学oracle,于是按照这本经典的书<Oracle Database 9i/10g/11g编程艺术>来学习. 配置环境 如何正确建立SCOTT/TIGER演示模式 需要建立和运 ...
- Servlet&jsp基础:第二部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 键盘unicode值对照表
A:65 B:66 C:67 D:68 E:69 F:70 G:71 H:72 I:73 J:74 K:75 L:76 M:77 N:78 O:79 P:80 Q:81 R:82 S:83 T:84 ...
- SQL——存储过程实例 循环
--循环 create or replace procedure p_xunhuan(input in number,output out number) is ); begin ; ..input ...
- LINQ之路 5:LINQ查询表达式
书写LINQ查询时又两种语法可供选择:方法语法(Fluent Syntax)和查询表达式(Query Expression). LINQ方法语法的本质是通过扩展方法和Lambda表达式来创建查询.C# ...
- yii CDbCriteria 类的总结
在编程中,我们通常会需要查询些东西,但是通过查询的时候,yii有个集成的类--- CDbCriteria():通过该类,我们可以更加便捷的调用数据. 参考网址:http://www.cnblogs.c ...
- LTE Module User Documentation(翻译4)—— 使用 Fading Trace
LTE用户文档 (如有不当的地方,欢迎指正!) 7 使用 Fading Trace 本节描述如何在 LTE 仿真中使用 fading traces . (1)生成 Fading Traces ...