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 ...
随机推荐
- UI事件 计算器界面
1.MainActivity.java package com.example.administrator.testapp2; import android.support.v7.app.AppCom ...
- 可是把ie67下面的bug改好了，其实很简单，ie67下面取出来的字符串是带有空格的，不知道为什么
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- mysql中整数类型后面的数字，是不是指定这个字段的长度？比如int(11)，11代表11个字节吗？
原文地址: http://www.cnblogs.com/stringzero/p/5707467.html 原先对mysql不太理解,但也没有报错.但理解的不够深入.这次补上. 原来以为int ...
- 各种操作中心Operation Center一览
Operation Center在中国可能有很多种名称,例如指挥中心.运维室.总控中心等等,国外可能也有很多名称,不管名称如何,任何一个上规模得数据总心或者运维单位一般都有一个这样得中心,来负责所管理 ...
- Java中静态和非静态的区别
在网上看到的,感觉还不错,自己笔记下来,以后忘了方便看: 非静态方法是相对于静态方法来说的.静态方法使用static关键字来标示,非静态方法没有此关键字. 他们之间最大的区别在于它们生命周期的不同,静 ...
- 移动端图表插件jChart.js的修改
bug1: 折线图,设置datasetGesture : true时,Y轴的刻度值居然会变.会变也就算了,居然没地方设置不能变. bug2: 折线图,设置tap.point事件,和datasetGes ...
- Cocos2d-x优化中纹理优化
转自 http://blog.csdn.net/tonny_guan/article/details/41016241 Cocos2d-x优化中纹理优化 1.纹理像素格式纹理优化工作的另一重要的指标是 ...
- ackerman递归
定义: n+1 n=0 A(m,n)={A(m-1,1) m=0 A(m-1,A(m,n-1)) n>0,m>0 #include <iostream> #inc ...
- ip地址的组成（网络位+主机位）
IP地址子网掩码都是32位的2进制,为了方便记忆转成10进制,通过子网掩码来区分网络位和主机位,子网掩码跟IP地址一一对应,子网掩码为1的是网络位,为0的是主机位.如:192.168.1.2 掩码25 ...
- php PDO链接SQL SERVER
操作系统Windows7 apache 2.2 php php-5.4.45-Win32-VC9-x86 sqlserver 2008 下载SQLSRV32 https://www.microsoft ...