html - 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/