canvas的一个demo

 

function _draw(cny, nickName) {
        _generateQrCode();

        var imgWidth  = 638,
            imgHeight = 456;

        ctx = $('#j_canvas')[0].getContext('2d');
        ctx.drawImage(document.getElementById('j_canvas_bg'), 0, 0, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight);
        ctx.drawImage($('.user-qrcode-img canvas')[0], 0, 0, 160, 160, 239, 250, 160, 160);//229, 260
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 10;
        // ctx.rect(229, 240, 180, 180);
        ctx.strokeRect(234, 245, 170, 170);
        // ctx.drawImage(document.getElementById('j_canvas_avatar'), 262, 47, imgWidth, imgHeight, 0, 0, 104, 104);
        var $avatar = $('#j_canvas_avatar'),
            tR      = 52;
        ctx.save();
        ctx.beginPath();
        ctx.arc(262 + tR, 47 + tR, tR, 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage($avatar[0], 262, 47, 2 * tR, 2 * tR);
        ctx.closePath();
        //#ffde00

        ctx.restore();
        ctx.font = '26px sans-serif';
        ctx.textBaseline = "center";
        ctx.textAlign = "center";
        ctx.save();

        ctx.rotate(-Math.PI / 180 * 1);
        ctx.fillStyle = '#d86825';
        ctx.fillText('66元', 188, 80);
        // ctx.fillStyle = '#ffde00';
        ctx.fillStyle = '#f00';
        ctx.fillText('66元', 188, 78);

        ctx.restore();
        ctx.fillStyle = '#e17b0e';
        ctx.shadowColor = "#ffffbe";
        ctx.shadowBlur = 2;
        ctx.font = '24px sans-serif';
        ctx.fillText(canvasSubString('昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称', ctx, 160), 319, 190);
    }