当初海报曾经是很常见的，毕竟用来做引流推广都是十分不便的，所以咱们能够应用Canvas疾速绘制海报，上面是我写的一个实例。

<!DOCTYPE html><html><head>    <title>Canvas</title>    <meta charset="utf-8"></head><style type="text/css">    *{        margin:0;        padding:0;    }    #myCanvas{        background: #eee;        margin:50px auto;        display: block;    }</style><body>    <canvas id="myCanvas"></canvas></body><script type="text/javascript">    var c = document.getElementById("myCanvas"); // 应用id来寻找canvas元素    var cxt = c.getContext("2d"); // 创立context对象    // 设置myCanvas的宽高    c.width = 320; //设置myCanvas的宽    c.height = 580; //设置myCanvas的高    // 绘制一个矩形，用来做全局背景色彩    cxt.fillStyle = "#fff"; // fillStyle办法将其染成红色    cxt.fillRect(0,0,c.width,c.height); // fillRect办法是创立一个矩形，x坐标、y坐标、宽度、高度    // 把图片绘制到myCanvas    var img = new Image()    img.src = "imgdemo.jpg" // 图片门路    // 为了避免图片还没加载实现就执行drawImage，须要提早10ms再执行drawImage    setTimeout(function(){        cxt.drawImage(img,20,20,280,280);    },10)    // 绘制商品题目，主动换行    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++){         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);        }    }    // 绘制券后价底部背景色    cxt.fillStyle = "#ff0036"; // fillStyle办法将其染成红色    cxt.fillRect(220,360,80,40); // fillRect办法是创立一个矩形，x坐标、y坐标、宽度、高度    // 绘制券底部背景色    cxt.fillStyle = "#ff0036"; // fillStyle办法将其染成红色    cxt.fillRect(20,360,150,40); // fillRect办法是创立一个矩形，x坐标、y坐标、宽度、高度    // 绘制价格    cxt.fillStyle="#fff";    cxt.font = "normal bold 20px 黑体";    var str_price = "券后价 ¥32.90"    cxt.textBaseline = "middle";    cxt.textAlign = "left";    cxt.fillText(str_price,26,380);    // 绘制券面值    cxt.fillStyle="#fff";    cxt.font = "normal bold 15px 黑体";    var str_quan = "券 ¥9.90"    cxt.textBaseline = "middle";    cxt.textAlign = "left";    cxt.fillText(str_quan,230,380);    // 绘制二维码    var qrcode = new Image()    qrcode.src = "qrcode.png" // 二维码图片门路    // 为了避免图片还没加载实现就执行drawImage，须要提早10ms再执行drawImage    setTimeout(function(){        cxt.drawImage(qrcode,95,420,130,130);    },10)    </script></html>

生成成果

Author:TANKING
Date:2020-08-28
Web:http://www.likeyun.cn/
WeChat:face6009