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 ...
随机推荐
- 【leetcode❤python】Binary Watch
#-*- coding: UTF-8 -*- from itertools import combinationsclass Solution(object): hourList=[8, ...
- [转]Unity 延迟执行一段代码的较为优雅的方式
Unity中,延时执行一段代码或者一个方法或者几个方法的情况非常普遍. 一般会用到Invoke和InvokeRepeating方法.顾名思义,第一个是执行一次,第二个是重复执行. 看下定义: void ...
- Change An Item Property Using Set_Item_Property In Oracle Forms
Set_Item_Property is used to change an object's settings at run time. Note that in some cases you ca ...
- liftover的使用/用法
Lift genome positions Genome positions are best represented in BED format. UCSC provides tools to co ...
- [CF733D]Kostya the Sculptor（贪心）
题目链接:http://codeforces.com/contest/733/problem/D 题意:给n个长方体,允许最多两个拼在一起,拼接的面必须长宽相等.问想获得最大的内切圆的长方体序号是多少 ...
- php 怎么设置报错级别 和 控制报错[转]
在Windows环境下:有时在其他环境下运行正常的程序在自己的环境上会报错误 程序会 报出 Undefined index: 这样的错误例如有如下的代码: ...
- [转载] 深入理解 docker ulimit
深入理解docker ulimit 2015年7月23日 10:00 阅读 12778 [编者的话]Docker大规模应用后,如果你没踩过坑,说出去肯定没人信.昨天就遇到一个ulimit的经典问题:业 ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- Spring对Hibernate事务管理
谈Spring事务管理之前我们想一下在我们不用Spring的时候,在Hibernate中我们是怎么进行数据操作的.在Hibernate中 我们每次进行一个操作的的时候我们都是要先开启事务,然后进行数据 ...
- Javascript设计模式之匿名函数与闭包
匿名函数 (function () { var foo = 10; var bar = 2; console.log(foo*bar); })(); // 20 带参数的匿名函数 (function ...