...

View Full Version : Problem in chrome



sugisha
06-18-2012, 06:55 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<title>HTML Canvas Flag Wave</title>

<style type="text/css" media="screen">

body { background:#eee }

#flag { position:absolute; top:50%; left:50% }

</style>

<script type="text/javascript">

var h = new Image;

h.onload = function(){

var flag = document.getElementById('flag');

var amp = 20;

flag.width = h.width;

flag.height = h.height + amp*2;

flag.getContext('2d').drawImage(h,0,amp,h.width,h.height);

flag.style.marginLeft = -(flag.width/2)+'px';

flag.style.marginTop = -(flag.height/2)+'px';

var timer = waveFlag( flag, h.width/10, amp );

};

h.src = 'gkhead.jpg';



function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){

if (!squeeze) squeeze = 0;

if (!shading) shading = 100;

if (!period) period = 200;

if (!amplitude) amplitude = 10;

if (!wavelength) wavelength = canvas.width/10;



var fps = 30;

var ctx = canvas.getContext('2d');

var w = canvas.width, h = canvas.height;

var od = ctx.getImageData(0,0,w,h).data;

// var ct = 0, st=new Date;

return setInterval(function(){

var id = ctx.getImageData(0,0,w,h);

var d = id.data;

var now = (new Date)/period;

for (var y=0;y<h;++y){

var lastO=0,shade=0;

var sq = (y-h/2)*squeeze;

for (var x=0;x<w;++x){

var px = (y*w + x)*4;

var pct = x/w;

var o = Math.sin(x/wavelength-now)*amplitude*pct;

var y2 = y + (o+sq*pct)<<0;

var opx = (y2*w + x)*4;

shade = (o-lastO)*shading;

d[px ] = od[opx ]+shade;

d[px+1] = od[opx+1]+shade;

d[px+2] = od[opx+2]+shade;

d[px+3] = od[opx+3];

lastO = o;

}

}

ctx.putImageData(id,0,0);

// if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));

},1000/fps);

}



</script>

</head><body>

<canvas id="flag"></canvas>

</body></html>



when change the image, effect not work in chrome. Please help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum