html5 canvas t桖diy的时候，将t桖原图添加到画布上作为背景图，怎么都添加不上去。。。求救。。。

[tangjia281323]

<script type="text/javascript">
    $(function () {

        function init() {
            T = 0,
                    R = 0,
                    k = 0,
                    S = !1,
                    y = 2,
                    x = 1,
                    _ = {
                        translate: {
                            x: 0,
                            y: 0
                        },
                        scale: 1,
                        angle: 0,
                        width: 0,
                        height: 0
                    };
        }


        var windowWidth = $(window).width() > 640 ? 640 : $(window).width();
        var screenW = windowWidth == 640 ? windowWidth * 0.4 : windowWidth * 0.60; //蒙版宽度
        var screenH = 297 * screenW / 210; //蒙版高度

        var screenWStart = (windowWidth - screenW) / 2; //蒙版x起始位置
        var screenHStart = ($(window).height() - screenW) / 2; //蒙版x起始位置
        //        $('.d3').height($(window).height());
        C = document.getElementById("mainCanvas"),
                b = document.querySelector("#design-area"),
                P = C.getContext("2d");
        C.width = $(window).width();
        C.height = $(window).height() - 50;

        var newimages = [],
                loadedimages = 0,
                arr = [];
        //var arr = ['images/111.jpg', 'images/8.png', 'images/1234.png'];

        function imageloadpost() {
            loadedimages++;

            if (loadedimages == arr.length) {
                init();
                _.width = newimages[1].width > 640 ? newimages[1].width / 2 : newimages[1].width;
                _.height = newimages[1].height * _.width / newimages[1].width;

                a();
                $('#loading').hide();

            }

        }

        function newImg(arr) {
            $('#loading').show();
            for (var i = 0; i < arr.length; i++) {
                newimages[i] = new Image()
                newimages[i].src = arr[i];
                console.log(arr[i]);
                if (newimages[i].complete) {
                    //alert("1");
                    imageloadpost()

                } else {
                    newimages[i].onload = function () {
                        //alert("2");
                        imageloadpost()

                    }
                }
            }
        }

        //	 		_.width=img.width;
        //	 		_.height=img.height;
        //			a()

        //  img0.src="images/333.jpg";	//T桖图images[0]
        //	img1.src="images/333.jpg";	//上传图images[2]
        //	img2.src="images/8.png";	//裁切区域images[1]
        //	img3.src="images/1234.png";	//边框图片images[2]
        function a(b) {

            P.clearRect(0, 0, C.width, C.height),
                    P.save();
            var t = _.angle * Math.PI / 180,
                    e = _.scale * Math.cos(t),
                    a = _.scale * Math.sin(t),
                    n = -_.scale * Math.sin(t),
                    i = _.scale * Math.cos(t);

            //P.globalCompositeOperation="source-atop"  ;
            if (b) { //拖动的时候
                //console.log(_.translate.x+248/2+82);
                P.setTransform(e, a, n, i, _.translate.x + screenW / 2 + screenWStart, _.translate.y + screenW / 2 + screenHStart);

                P.drawImage(newimages[1], -_.width / 2, -_.height / 2, _.width, _.height);
                P.setTransform(1, 0, 0, 1, 0, 0);
                P.globalAlpha = 0.2;
                //P.globalCompositeOperation="darker"  ;
                P.drawImage(newimages[2], screenWStart, screenHStart, screenW, screenH);
            } else {

                P.drawImage(newimages[2], screenWStart, screenHStart, screenW, screenH); //蒙版
                P.globalAlpha = 1;
                P.globalCompositeOperation = "source-in";

                P.setTransform(e, a, n, i, _.translate.x + screenW / 2 + screenWStart, _.translate.y + screenW / 2 + screenHStart);
                P.drawImage(newimages[1], -_.width / 2, -_.height / 2, _.width, _.height);

                P.restore();
                P.save();
                P.setTransform(1, 0, 0, 1, 0, 0);
                P.drawImage(newimages[3], screenWStart, screenHStart, screenW, screenH); //边框
            }

            P.restore(),
                    S = !1;

            var g = _.translate.x;
            var d = _.translate.y;
        }

        function n() {
            S || (v(a), S = !0)
        }

        function i(t) { //tap
            document.title = "tap";
        }

        function o(t) { //panstart panmove
            _.translate = {
                x: R + t.deltaX,
                y: k + t.deltaY
            },
                    a('yidonging')
        }

        function r() { //panend rotatesend
            R = _.translate.x,
                    k = _.translate.y;
            a()
        }

        function s(t) { //pinchstart pinchmove
            "pinchstart" == t.type && (D = _.scale || 1);
            //alert();
            var e = D * t.scale;
            _.scale = e;
            a('yidonging')

        }

        function l(t) { //rotatestart rotatemove
            "rotatestart" == t.type && (T = _.angle || 0),
                    _.angle = T + t.rotation,
                    a('yidonging');

        }

        //window.mainCtx = P;
        var A = new Hammer(b);
        A.add(new Hammer.Pan({
            threshold: 15,
            pointers: 1
        })),
                A.add(new Hammer.Rotate({
                    threshold: 0
                })).recognizeWith(A.get("pan")),
                A.add(new Hammer.Pinch({
                    threshold: 0
                })).recognizeWith([A.get("pan"), A.get("rotate")]);
        A.on("panstart panmove", o),
                A.on("rotatestart rotatemove", l),
                A.on("rotateend", r),
                A.on("pinchstart pinchmove", s),
                A.on("panend", r);
        A.on("tap", i);

        $('#b1').click(function () {//切换背景衣服
            $('#design-area').css("background-image", "url(/images/tee.png)");
            //            $(".d1 .tx").show().siblings(".d1 .wy").hide();
        });
        $('#b2').click(function () {//切换背景衣服
            $('#design-area').css("background-image", "url(/images/else/a4.png)");
            //            $(".d1 .wy").show().siblings(".d1 .tx").hide();
        });
        $('#b3').click(function () {//复位
            loadedimages = 0;
            newImg(arr);
        });
        function zoomFun(a) {
            a.toggleClass("active");
            if (a.is(".active")) {
                $('.d2').css('transform', 'scale(1.4, 1.4)');
            } else {
                $('.d2').css('transform', 'scale(1, 1)');
            }
        }

        var Imgs = $(".tpls").find("img"); //默认第一个蒙版
        //imgTap.call(Imgs[0]);
        arr = ['/images/tee1.jpg', '/images/333.jpg', '/images/10.png', '/images/11.png'];
        newImg(arr);
        //$(".tpls img").on("click", imgTap); //加蒙蔽事件
        $(".btn-extend").on("click", function () {
            $(".foot").toggleClass("hide") //收起展开按钮
        });
        $("#zoom").on("click", function () {//放大缩小按钮
            zoomFun($(this));
        });
        //zoomFun();
        $("#choose-btn").on("click", function () {//男女圆领选择
            $(this).toggleClass("active"),
                    $(".choose-panel").toggleClass("active")
        });
        $("#options a").on("click", function (t) {
            $(this).addClass("active").siblings().removeClass("active");
        });
        document.ontouchmove = function (t) {//防止iphone屏幕滑动
            t.preventDefault()
        };

        $("#NextStep").on("click", function (t) {
            convertCanvasToImage(C);
        });
    })

    function convertCanvasToImage(canvas) {
        var hc_image = new Image();
        hc_image.src = canvas.toDataURL("image/png");
        $('#imgBox').html(hc_image);
    }
</script>