console 命令行工具 X clear

console

/**
 * 角度转弧度
 */
function angleToRadian(angle) {
    return angle * Math.PI / 180
}

/**
 * 绘制方法
 * @param {HTMLNode} $canvas Canvas DOM 节点
 * @param {(string|number)} text 绘制文字
 * @param {number} angle 旋转角度（逆时针）
 * @param {number} fontSize 字号
 */
function draw($canvas, text, color, angle, fontSize) {
    // 获取上下文
    const $ctx = $canvas.getContext('2d')

    // 设置字体字号，计算文字尺寸
    $ctx.font = `${fontSize}px PingFangSC`
    const textWidth = $ctx.measureText(`${text}`).width
    const textHeight = fontSize * 1.4

    // 计算画布尺寸
    const canvasWidth = textHeight * Math.abs(Math.sin(angleToRadian(angle))) + textWidth * Math.abs(Math.cos(angleToRadian(angle)))
    const canvasHeight = textWidth * Math.abs(Math.sin(angleToRadian(angle))) + textHeight * Math.abs(Math.cos(angleToRadian(angle)))

    // 设置 canvas 尺寸
    $canvas.width = canvasWidth
    $canvas.height = canvasHeight

    // 偏移画布坐标系顶点到画布中心
    $ctx.translate(canvasWidth / 2, canvasHeight / 2)
    // 以画布坐标系顶点旋转画布
    $ctx.rotate(-angleToRadian(angle))

    // 设置文字相关属性
    $ctx.font = `${fontSize}px PingFangSC`
    $ctx.fillStyle = color
    $ctx.textBaseline = 'middle'
    $ctx.textAlign = 'center'
    // 绘制文字
    $ctx.fillText(text, 0, 0)

    // 通过矩阵变换复位坐标系
    // $ctx.setTransform(1, 0, 0, 1, 0, 0)
}

// 执行绘制
draw(
    document.querySelector('#canvas'),
    '|   国        ·                国   |',
    'blue',
    15,
    20
)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水印 Canvas 绘制 Demo</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

#canvas {
    border: 1px solid red;
}