Html5 Canvas生成淘寶客海報，生成手機海報

時間 2020-08-29

標籤 html5 html canvas 生成淘寶海報手機欄目 HTML5 简体版

原文原文鏈接

如今海報已是很常見的，畢竟用來作引流推廣都是很是方便的，因此咱們能夠使用Canvas快速繪製海報，下面是我寫的一個實例。javascript

<!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:face6009css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。