<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oc = document.getElementById(‘c1‘);
var ogc = oc.getContext(‘2d‘);
var yimg = new Image();
yimg.onload = function ()
{
draw(this);
};
yimg.src = ‘img/5-5.jpg‘;
function draw(obj)
{
oc.width = obj.width;
oc.height = obj.height * 2;
ogc.drawImage(obj,0,0);
var oimg = ogc.getImageData(0,0,obj.width,obj.height);
var w = oimg.width;
var h = oimg.height;
var num = 5;
var newimg = ogc.createImageData(obj.width,obj.height);
var stepw = w/num;
var steph = h/num;
for(var i = 0; i < steph; i++)
{
for(var j = 0; j < stepw; j++)
{
var color = getXY(oimg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
for(var k = 0; k < num; k++)
{
for(var l = 0; l < num; l++)
{
setXY(newimg,j*num+l,i*num+k,color);
}
}
}
}
ogc.putImageData(newimg,0,obj.height);
}
function getXY(obj,x,y)
{
var w = obj.width;
var h = obj.height;
var d = obj.data;
var color = [];
color[0] = d[ 4*(y*w+x)];
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;
var h = obj.height;
var d = obj.data;
d[ 4*(y*w+x)] = color[0];
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>
<style>
body{
background:pink;
}
#c1{
background:white;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
时间： 2024-10-03 14:45:14