canvas海报

分享海报

    <canvas id="myCanvas"></canvas>

    <script>
    let c = document.querySelector('#myCanvas');
    let cxt = c.getContext('2d')// 创建context对象

    // 设置myCanvas的宽高
    c.width = 320;
    c.height= 580;

    // 绘制一个矩形, 用来做全局背景颜色
    cxt.fillStyle = '#999';// fillstyle方法将其染成红色
    cxt.fillRect(0,0,c.width,c.height)// fillRect方法创建一个矩形:x坐标,y坐标,宽度,高度;

    // 绘制图片到myCanvas里
    let img = new Image()
    img.src = './img/bg1.png'

    // 防止图片没有加载完成就执行了drawImage
    setTimeout(()=>{
        cxt.drawImage(img,20,20,280,280) // x坐标,y坐标,宽度,高度
    },100)


    cxt.fillStyle="#333";
    cxt.font = "15px bold 黑体";
    var str = "为老人、小孩等各年龄段用户提供线上+线下、监测+分析干预的新型医疗健康服务，成为亿万家庭的健康守门人"
    cxt.textBaseline = "middle";
    cxt.textAlign = "left";
    var lineWidth = 0;

    var canvasWidth = 280;//一行文字占用的宽度
    var initHeight=320;//绘制字体距离canvas顶部初始的高度
    var lastSubStrIndex= 0; //每次开始截取的字符串的索引
    for(let i=0;i<str.length;i++){ 
        // debugger
        lineWidth+=cxt.measureText(str[i]).width; 
        if(lineWidth>canvasWidth){  
            cxt.fillText(str.substring(lastSubStrIndex,i),20,initHeight);//绘制截取部分
            initHeight+=20; //20为字体的高度
            lineWidth=0;
            lastSubStrIndex=i;
        } 
        if(i==str.length-1){ //绘制剩余部分
            cxt.fillText(str.substring(lastSubStrIndex,i+1),20,initHeight);
        }
    }

    // Canvas底部背景色
    cxt.fillStyle = "green"; // fillStyle方法将其染成红色
    cxt.fillRect(20,380,150,40); // fillRect方法是创建一个矩形，x坐标、y坐标、宽度、高度
    // 安福星底部背景色
    cxt.fillStyle = "#ff0036"; // fillStyle方法将其染成红色
    cxt.fillRect(220,380,80,40); // fillRect方法是创建一个矩形，x坐标、y坐标、宽度、高度

     // 绘制Canvas底部值
     cxt.fillStyle="#fff";
    cxt.font = "normal bold 15px 黑体";
    var str_quan = "Canvas海报"
    cxt.textBaseline = "middle";
    cxt.textAlign = "left";
    cxt.fillText(str_quan,220,400);// 填充文字


    // 绘制安福星底部值
    cxt.fillStyle="#fff";
    cxt.font = "normal bold 20px 黑体";
    var str_price = "安福星"
    cxt.textBaseline = "middle";
    cxt.textAlign = "left";
    cxt.fillText(str_price,26,400);// 填充文字

   

    // 绘制二维码
    var qrcode = new Image()
    qrcode.src = "./img/bg2.png" // 二维码图片路径

    // 为了防止图片还没加载完成就执行drawImage，需要延迟10ms再执行drawImage
    setTimeout(function(){
        cxt.drawImage(qrcode,95,440,130,130);// 图片路径 , x坐标, y坐标,图片宽,图片高 
    },300)
    
</script>