0

canvas と 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);		
          // 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

素敵な旗を振っていますが、問題があります。キャンバスが苦手です。キャンバスを回転させたい、画像の上部を固定したい、波が上から下に移動することは可能ですか。

4

1 に答える 1

1

これが簡単な解決策です。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-16T15:31:08.853 に答える