帆布挥动旗帜HTML5

我需要一些关于帆布和HTML5的帮助。帆布挥动旗帜HTML5

我有这样的代码

<!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); \t \t 
 
      // if ((++ct)%100 == 0) console.log(1000 * ct/(new Date - st)); 
 
     },1000/fps); 
 
     } 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    <canvas id="flag"></canvas> 
 
    </body> 
 
</html>

结果是这样的： http://www.americkiplakari.org/zastavanovo.html

尼斯飘扬的旗帜，但我有一个问题，我不用帆布很好。我想旋转画布，我想要固定图像的顶部，并且波浪从上到下，是否可以这样做。

来源

2013-01-16 Tanja Pakovic

只是一个想法，但是为什么你在使用HTML4 DOCTYPE一个明确使用HTML5元素的文档？ –

这只是一个例子:) –

确定这里是简单的解决方案，只是用CSS3旋转，把帆布在另一个DIV，你准备好了去....

<style type="text/css" media="screen"> 
    body { background:#eee } 
#flagunustra { position:absolute; top:50%; left:50% } 
#flag{ 
margin-top:250px; 
width:414px; 
transform:rotate(90deg); 
-ms-transform:rotate(90deg); /* IE 9 */ 
-moz-transform:rotate(90deg); /* Firefox */ 
-webkit-transform:rotate(90deg); /* Safari and Chrome */ 
-o-transform:rotate(90deg); /* Opera */ 
} 
</style> 


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

来源

2013-01-16 15:31:08

感谢这一点。基于你的回答更新https://github.com/dan-nl/wave-a-flag。 –

帆布挥动旗帜HTML5

回答

相关问题