zoukankan      html  css  js  c++  java
  • 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);
        }
  • 相关阅读:
    字符,字节和编码
    Linux网络参数和ifconfig
    默认网关 网关 子网掩码 广播地址
    S.M.A.R.T.记录几块ssd硬盘
    linux 别名
    echo 输出颜色
    Linux:echo命令详解
    centos下安装mongodb 通过shell脚本
    linux查看登录用户
    linux wget指定下载目录和重命名
  • 原文地址:https://www.cnblogs.com/everyone/p/8276001.html
Copyright © 2011-2022 走看看