canvas画图（文字换行，图片）

图片

layer数据.png

//config为返回画布数据
config = {top: -350,
left: 0,
zoom: 0.6,
width: 1920,
height: 1080,
programName: "测",
programId: "2139",
opacity: 1,
backgroundColor: "#4a4a4a" }
//layer数据看上图

let canvas = document.createElement("canvas");
canvas.width = config.width * zoom;
canvas.height = config.height * zoom;
let ctx = canvas.getContext("2d");
ctx.fillStyle = config.backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);

function drawImageOnCanvas(ctx, config, layer) {
    var resource = layer.content[0];
    return new Promise((resolve, reject) => {
        let { x, y } = layer.style;
        var img = document.createElement("img");
     //图片跨域(若仍跨域请在阿里云后台设置跨域为*)
        img.setAttribute('crossOrigin', 'Anonymous');
        img.onload = () => {
            var style = getImageStyle(layer.style, { width:resource.widthDpi, height:resource.heightDpi });
            ctx.drawImage(img, 0, 0, img.width, img.height, (x + style.x) * zoom, (y + style.y) * zoom, style.width * zoom, style.height * zoom);
            resolve();
        }
        img.onerror = (err) => {
            console.log(err);
            resolve();
        }
        img.src = resource.imgCover;
    });
}

调用

if (layer.content.length > 0) {
      drawImageOnCanvas(ctx, config, layer, layer.content[0].imgCover)
      .then(next)
      .catch(reject)
    } else {
       next()
    }

---

文字（可换行）

function drawTextOnCanvas(ctx, config, layer, src) {
    return new Promise((resolve, reject) => {
        let { x, y, width, height, textAlign, backgroundColor, 
                color, fontSize, fontStyle, fontHeight,
                fontFamily, textDecoration} = layer.style;
        // 设置背景颜色
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(x * zoom, y * zoom, width * zoom, height * zoom);
        // 设置字体
        ctx.fillStyle = color;
        ctx.font = `${parseInt(fontSize) * zoom}px ${textDecoration} ${fontFamily} ${fontStyle} ${fontHeight}`;
        // 设置水平对齐方式
        ctx.textAlign = textAlign;
        // 设置垂直对齐方式
        ctx.textBaseline = "middle";
        // 绘制的文字（参数：要写的字，x坐标，y坐标）
        var str = src.sourceName;
        var lineWidth = 0;
         //这里是系数，要自己算
        var currentTop = y + parseInt(fontSize) * 1.3;
        var lastIndex = 0; //每次开始截取的字符串的索引 

        for (let i = 0; i < str.length; i++) {
            lineWidth += (ctx.measureText(str[i]).width + 0.05);
            if (lineWidth > width * zoom || str[i] === "\n") { 
                ctx.fillText(str.substring(lastIndex, i).replace("\n", ""), layer.style.x * zoom, currentTop * zoom);
                currentTop += parseInt(fontSize) * 1.3;
                lineWidth = 0;
                lastIndex = i;
            }
            if (i === str.length - 1) { //绘制剩余部分
                ctx.fillText(str.substring(lastIndex, i + 1), layer.style.x * zoom, currentTop * zoom);
            }
            if(currentTop > height + parseInt(fontSize) * 0.3){
                break;
            }
        }
        resolve();
    })
}

调用

drawTextOnCanvas(ctx, config, layer, layer.content[0])
.then(next)
.catch(reject)

时间

layer数据

time数据.png

function drawTimeOnCanvas(ctx, config, layer){
    return new Promise((resolve, reject)=>{
        let {x, y, width, height, backgroundColor, color, fontSize, model} = layer.style;
        ctx.font = parseInt(fontSize) * zoom+"px bold "+layer.style.fontFamily;
        ctx.textAlign =layer.style.textAlign;
        ctx.fillStyle=backgroundColor;
        ctx.fillRect(x * zoom, y * zoom, width * zoom, height * zoom);
        ctx.fillStyle=color;
        const currentTop = y + parseInt(fontSize) * 1.3;
        const timeType = layer.content[0].resourceType;  
        if(timeType === 1){
            ctx.fillText(moment().format(model), x * zoom , currentTop * zoom )
        }else if(timeType === 2){
            ctx.fillText(DataFormatUtil.getWeekDay(model, new Date().getDay()), x * zoom , currentTop * zoom );
        }else if(timeType === 3){
            ctx.fillText(moment().format(model), x * zoom, currentTop * zoom)
        }else if(timeType === 4){
            ctx.fillText("0天0时0分0秒", x * zoom, currentTop * zoom)
        }else if(timeType === 5){
            ctx.fillText("0天0时0分0秒", x * zoom, currentTop * zoom)
        }else if(timeType === 6){
            ctx.fillText("0天0时0分0秒", x * zoom, currentTop * zoom)
        }
        resolve();
    });
}