Canvas-绘制高清文字

把文件直接保存成test.html，然后用浏览器打开即可。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>canvas 高清文字</title>
</head>
<body>
<script>
    
function convertToRGBAStr(color, opacity=1){
    return  "rgba(" + color.r + "," + color.g + "," + color.b + "," + opacity + ")";
}

function roundRect(ctx, x, y, w, h, r) 
{
    ctx.beginPath();
    ctx.moveTo(x+r, y);
    ctx.lineTo(x+w-r, y);
    ctx.quadraticCurveTo(x+w, y, x+w, y+r);
    ctx.lineTo(x+w, y+h-r);
    ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
    ctx.lineTo(x+r, y+h);
    ctx.quadraticCurveTo(x, y+h, x, y+h-r);
    ctx.lineTo(x, y+r);
    ctx.quadraticCurveTo(x, y, x+r, y);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();   
}

function canvasText(text, _c){

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;

    var borderColor = _c.borderColor;
    var backgroundColor =  _c.backgroundColor;
    var textColor =  _c.textColor;

    context.font = "" + _c.fontSize + "px " + _c.fontFace;
    var metrics = context.measureText(text);
    var textWidth = metrics.width;

    
    /*计算画布的高度*/
    var h = Math.round(_c.lineHeight * _c.fontSize + _c.borderThickness * 2);
    /*计算画布的宽度*/
    var w = Math.round(_c.borderThickness * 2 + textWidth + _c.padding * 2);
    canvas.width = dpr * w;
    canvas.height = dpr * h;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    context.scale(dpr, dpr);

    context.font = "" + _c.fontSize + "px " + _c.fontFace;
    context.fillStyle = convertToRGBAStr(backgroundColor, _c.opacity);
    context.strokeStyle = convertToRGBAStr(borderColor, _c.opacity);

    context.lineWidth = _c.borderThickness;
    roundRect(context, _c.borderThickness/2, _c.borderThickness/2, w - _c.borderThickness , h- _c.borderThickness, _c.borderRadius);

    context.textAlign = 'center';
    context.textBaseline  = 'middle';
    context.fillStyle = convertToRGBAStr(textColor);
    context.fillText(text, w/2, h/2);

    return canvas;

}

var canvas = canvasText('测试高清文字',{
    fontFace: "Arial",
    fontSize: 28,
    borderThickness: 1,
    borderRadius:4,
    padding: 40,
    lineHeight: 2,
    borderColor: {r:255,g:0,b:0},
    backgroundColor: {r:255,g:0,b:0},
    textColor: {r:255,g:255,b:255},
    opacity: 1.0,
})

document.body.append(canvas);


</script>
</body>
</html>
最后编辑于：2020.07.15 11:57:20