当前位置：首页 > news >正文

【canvas】了解canvas，并实现会议预定记录钟表盘、页面水印

news 来源：原创 2025/5/14 22:45:31

初识canvas

Canvas 有什么用

Canvas 允许使用直线、曲线、矩形、圆形等基本图形绘制出复杂的图形

Canvas 可以加载图像，并进行各种处理，如裁剪、缩放、旋转等操作

Canvas 可以通过 JavaScript 控制，所以你可以利用帧动画原理，在画布上连续绘制图形，从而实现流畅的动画效果。

Canvas 提供了强大的绘图能力，使得将复杂的数据以图表或图形的方式展示变得更加容易。你可以绘制柱状图、折线图、饼状图等，以直观的方式展示数据

canvas 绘图基本步骤：

建立canvas 画布

 <canvas id="canvas"></canvas>

通过canvas 画布获取上下文对象

上下文对象可以理解为画笔，画布建好了，然后再准备好画笔是不是就可以开画拉

const canvas = document.querySelector('#canvas')
canvas.height = window.innerHeight
canvas.width = window.innerWidth
const ctx = canvas.getContext(‘2d’)

设置画笔颜色与图形形状

ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 500, 500)

就完成一个最简单的绘制：

使用用canvas绘制一个机器人头像：

    <canvas id="robot" width="200" height="200"></canvas>

    <script>
        const canvas = document.getElementById('robot');
        const ctx = canvas.getContext('2d');

        //fillStyle=>设置填充区域的颜色
        ctx.fillStyle = 'gray';
        //strokeStyle=>设置描边的颜色
        ctx.strokeStyle = 'black';
        //lineWidth=>设置描边的宽度
        ctx.lineWidth = 2;

        // 在Canvas绘图中，每个新的路径（line、rect、arc等）都会自动连接到之前绘制的路径上。如果希望绘制一个新的路径，就需要使用beginPath()方法来开启一个新路径
        ctx.beginPath();
        // 以 (x, y) 为圆心，半径为 r，从 startAngle 开始，到 endAngle 结束，画一个弧形
        ctx.arc(100, 100, 50, 0, Math.PI * 2);
        console.log(Math.PI) //3.1415926
        //对路径进行填充。
        ctx.fill();
        //对路径进行描边。
        ctx.stroke();

        // 画眼睛
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(75, 70, 10, 0, Math.PI * 2);
        ctx.arc(125, 70, 10, 0, Math.PI * 2);
        ctx.fill();

        // 画瞳孔
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(75, 70, 3, 0, Math.PI * 2);
        ctx.arc(125, 70, 3, 0, Math.PI * 2);
        ctx.fill();

        // 画嘴巴
        ctx.beginPath();
        ctx.moveTo(70, 130);
        ctx.bezierCurveTo(70, 140, 130, 140, 130, 130);
        ctx.stroke();

        // 画腮红
        ctx.fillStyle = 'pink';
        ctx.beginPath();
        ctx.arc(60, 110, 10, 0, Math.PI * 2);
        ctx.arc(140, 110, 10, 0, Math.PI * 2);
        ctx.fill();
    </script>

再识canvas

W3C 坐标系

canvas中的路径

beginPath()：这个方法用于开始一个新的路径，相当于重置了路径的起点和样式。

closePath()：这个方法将路径的最后一个点与路径起点连接，形成封闭的图形。

moveTo(50, 100)：起点坐标 (x, y)

lineTo(200, 50)：下一个点的坐标 (x, y)

stroke()：这个方法用于描边路径，将上面的坐标用一条线连接起来

fill()：这个方法用于填充路径所包围的区域，采用当前路径样式的设置（例如填充的颜色）

样式

lineWidth：线的粗细

strokeStyle：线的颜色

lineCap：线帽：默认: butt; 圆形: round; 方形: square

详细可看：Canvas 从入门到劝朋友放弃（图解版）✨ - 知乎

效果图：

创建一个动态的时间

        function updateTime() {
            var now = new Date();
            var today = now.toDateString();
            var time = now.toLocaleTimeString();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            var minutesString = minutes.toString().padStart(2, '0')
            var secondsString = seconds.toString().padStart(2, '0');
            var timeString = hours + ":" + minutesString + ":" + secondsString;
            $("h1").text(timeString);
        }
        updateTime()
        setInterval(updateTime, 1000);

var minutesString = minutes.toString().padStart(2, '0')

这段代码的作用是将分钟数和秒数转换为字符串，并在字符串长度不足2位时，在字符串前面填充0

有会议的时间段绘制选中状态

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // 线条宽度、线条末端样式、阴影模糊度
    ctx.lineWidth = 15;
    ctx.lineCap = "round";
    ctx.shadowBlur = 15;
    // 将角度值转换为弧度值
    function degToRad(degree) {
        var factor = Math.PI / 180;
        return degree * factor;
    }

    // 转换数值 360度转换成24份,并修正从0点开始
    function convertNum(num) {
        return degToRad(num * 15 - 90);
    }
    function draw() {
        ctx.strokeStyle = "#42dfbf";
        ctx.shadowColor = '#95e0d1';

        // 创建了一个径向渐变对象
        gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 150);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 400, 400);

        // 0点到3点
        // beginPath 开始一个新的绘图路径
        ctx.beginPath();
        // arc 方法绘制了一个弧线
        ctx.arc(200, 200, 170, convertNum(0), convertNum(4));
        // stroke 方法绘制出刻度线
        ctx.stroke();

        // 7到8
        ctx.beginPath();
        ctx.arc(200, 200, 170, convertNum(7), convertNum(8));
        ctx.stroke();

        // 14-16
        ctx.beginPath();
        ctx.arc(200, 200, 170, convertNum(14), convertNum(16));
        ctx.stroke();
    }
    draw();

绘制时间刻度，固定刻度显示时间，其他显示原点

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // 线条宽度、线条末端样式、阴影模糊度
    ctx.lineWidth = 15;
    ctx.lineCap = "round";
    ctx.shadowBlur = 15;
    // 将角度值转换为弧度值
    function degToRad(degree) {
        var factor = Math.PI / 180;
        return degree * factor;
    }
    // 绘制表盘刻度线
    function drawClockFace() {
        ctx.shadowColor = '#40b7c6';
        ctx.strokeStyle = "#90bdc3";
        for (var i = 0; i < 24; i++) {
            var angle = degToRad(i * 15 - 90);
            ctx.beginPath();
            ctx.arc(200, 200, 170, angle, angle + degToRad(0.5));

            if (i % 3 === 0) {
                // 绘制文本
                ctx.save();
                ctx.translate(200, 200); // 将坐标原点移动到表盘中心
                ctx.rotate(angle + Math.PI / 2); // 旋转文本使其与刻度对齐
                ctx.textAlign = "center";
                ctx.font = "bold 20px Arial";
                ctx.fillStyle = "#fff";
                ctx.fillText(i.toString(), 0, -163); // 在指定位置绘制文本
                ctx.restore();
            } else {
                // 绘制圆点
                ctx.stroke();
            }
        }
    }
    drawClockFace();

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    body {
        background-color: gray;
    }

    .content {
        position: relative;
        display: flex;
        justify-content: center;
    }

    h1 {
        font-family: helvetica;
        font-size: 2.5rem;
        color: black;
        position: absolute;
        top: 38%;
        z-index: -1;
    }

    #canvas {
        display: block;
        margin: 5vh auto;
        border-radius: 50%;
        box-shadow: 0 5px 14px black;
    }
</style>

<body>
    <div class="content">
        <h1></h1>
        <canvas id="canvas" width="400" height="400"></canvas>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.js"></script>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // 线条宽度、线条末端样式、阴影模糊度
    ctx.lineWidth = 15;
    ctx.lineCap = "round";
    ctx.shadowBlur = 15;
    // 将角度值转换为弧度值
    function degToRad(degree) {
        var factor = Math.PI / 180;
        return degree * factor;
    }
    // 绘制表盘刻度线
    function drawClockFace() {
        ctx.shadowColor = '#40b7c6';
        ctx.strokeStyle = "#90bdc3";
        for (var i = 0; i < 24; i++) {
            var angle = degToRad(i * 15 - 90);
            ctx.beginPath();
            ctx.arc(200, 200, 170, angle, angle + degToRad(0.5));

            if (i % 3 === 0) {
                // 绘制文本
                ctx.save();
                ctx.translate(200, 200); // 将坐标原点移动到表盘中心
                ctx.rotate(angle + Math.PI / 2); // 旋转文本使其与刻度对齐
                ctx.textAlign = "center";
                ctx.font = "bold 20px Arial";
                ctx.fillStyle = "#fff";
                ctx.fillText(i.toString(), 0, -163); // 在指定位置绘制文本
                ctx.restore();
            } else {
                // 绘制圆点
                ctx.stroke();
            }
        }
    }

    draw();
    drawClockFace();


    // 转换数值 360度转换成24份,并修正从0点开始
    function convertNum(num) {
        return degToRad(num * 15 - 90);
    }
    function draw() {
        ctx.strokeStyle = "#42dfbf";
        ctx.shadowColor = '#95e0d1';
        function updateTime() {
            var now = new Date();
            var today = now.toDateString();
            var time = now.toLocaleTimeString();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            var minutesString = minutes.toString().padStart(2, '0')
            var secondsString = seconds.toString().padStart(2, '0');
            var timeString = hours + ":" + minutesString + ":" + secondsString;
            $("h1").text(timeString);
        }
        updateTime()
        setInterval(updateTime, 1000);

        // 创建了一个径向渐变对象
        gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 150);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 400, 400);

        // 0点到3点
        // beginPath 开始一个新的绘图路径
        ctx.beginPath();
        // arc 方法绘制了一个弧线
        ctx.arc(200, 200, 170, convertNum(0), convertNum(4));
        // stroke 方法绘制出刻度线
        ctx.stroke();

        // 7到8
        ctx.beginPath();
        ctx.arc(200, 200, 170, convertNum(7), convertNum(8));
        ctx.stroke();

        // 14-16
        ctx.beginPath();
        ctx.arc(200, 200, 170, convertNum(14), convertNum(16));
        ctx.stroke();
    }
</script>

</html>

动态添加水印

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="content" style="width: 400px;height: 400px;background-color: antiquewhite;">
        你好
    </div>
    <script>
        /**
     * 动态添加水印
     * @param {String} str 水印内容
     */
        function addWaterMark(str) {
            const body = document.getElementById('content');
            const canvas = document.createElement('canvas');

            body.appendChild(canvas);

            canvas.width = 200;
            canvas.height = 200;
            canvas.style.display = 'none';
            var cans = canvas.getContext('2d');
            cans.rotate((-20 * Math.PI) / 180);
            cans.font = '12px Microsoft JhengHei';
            cans.fillStyle = 'rgba(17, 17, 17, 1)';
            cans.textAlign = 'left';
            cans.textBaseline = 'Middle';
            // 表示在 <canvas> 上绘制一段文本，起始位置为左上角的 (30, 105)，并且文本的最大宽度限制为 200。水印的文本内容将会从 (30, 105) 开始，并在指定的最大宽度内绘制
            cans.fillText(str, 0, 130, 200);
            body.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
        }
        addWaterMark("阿晨出品 必然精品")
    </script>
</body>

</html>