canvas基础—04像素之马赛克
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas学习</title>
<style>
body{background: black;color:white;font-size:30px;}
#c1{background: white}
span{color: white}
</style>
<script type="text/javascript">
window.onload = function(){
var oC = document.getElementById('c1')
var oGC = oC.getContext('2d')
var yImg = new Image()
yImg.onload = function(){
draw(this)
}
yImg.src = '1.png'
function draw(obj) {
oC.width = obj.width
oC.height = obj.height * 2
oGC.drawImage(obj,0,0) // drawImage(oImg,x,y,w,h)
var oImg = oGC.getImageData(0,0,obj.width,obj.height)//获取图像数据(x,y,w,h)
var w = oImg.width //图片一行的个数
var h = oImg.height //图片一列的个数
//***
var newImage = oGC.createImageData(obj.width,obj.height)//createImageData(w,h)生成新的像素矩阵
var stepW = Math.floor(w/10)
var stepH = Math.floor(h/10)
for(var i = 0;i<stepH;i++){ //每一行
for(var j = 0;j<stepW;j++){ //每一列
// 随机取某一个区域的颜色
var color = getXY(oImg,j*10+Math.floor(Math.random()*10),i*10+Math.floor(Math.random()*10))
// 该区域所有的颜色都要变成这个颜色值
for(var k =0;k<10;k++){
for(var l=0;l<10;l++){
setXY(newImage,j*10+l,i*10+k,color)
}
}
}
}
oGC.putImageData(newImage,0,obj.height)
}
// 返回该像素点的颜色
function getXY(obj,x,y) {
var w =obj.width //100
var h = obj.height //100
var d = obj.data
var color = []
color[0] = d[4*(y*w+x)] //4(y*w+x)的结果是算出这一行以前的所有值,假设是一个10*10就好理解
color[1] = d[4*(y*w+x)+1]
color[2] = d[4*(y*w+x)+2]
color[3] = d[4*(y*w+x)+3]
return color
}
function setXY(obj,x,y,color){
var w =obj.width //100
var h = obj.height //100
var d = obj.data
d[4*(y*w+x)] = color[0] //4(y*w+x)的结果是算出这一行以前的所有值,假设是一个10*10就好理解
d[4*(y*w+x)+1] = color[1]
d[4*(y*w+x)+2] = color[2]
d[4*(y*w+x)+3] = color[3]
}
}
</script>
</head>
<body>
<canvas id="c1" width="1000" height="1000">
<span>不支持canvas浏览器</span>
</canvas>
</body>
</html>
效果
还没有评论,来说两句吧...