用js創建畫布並對齊元素

Question

我在下面的代碼可以幫助我將圖像與任何設備/屏幕上的中心對齊。

現在我需要繪製picture(myImage)作爲畫布，幫助不$("body").append(img);

我怎樣才能做到這一點？

<script> 
     $(document).ready(function() { 
      var img=new Image(); 
      img.src="myImage.jpg" 
      img.onload=function() { 
      // console.log("image is loaded, yessss!") 
       function my_resize() { 
        var w=img.width; 
        var h=img.height; 
        var ww=$(window).width(); 
        var wh=$(window).height(); 
        var ox=(ww-w)/2; 
        var oy=(wh-h)/2; 
        console.log("data is " 
         +w+","+ 
         +h+","+ 
         +ww+","+ 
         +wh+","+ 
         +ox+","+ 
         +oy+"," 
        ); 
        $(img).offset({left:ox,top:oy,}); 
       } 
       $("body").append(img); 
       my_resize(); 
       $(window).resize(function() { 
        my_resize(); 
        }); 
      } 
     }); 
    </script> 

Answer 1

試試這個的jsfiddle：

http://jsfiddle.net/MqkRs/4/