使用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/