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

      初识canvas

    Canvas 有什么用

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

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

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

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

    canvas 绘图基本步骤：

    • 建立canvas 画布
     <canvas id="canvas"></canvas>
    • 通过canvas 画布获取上下文对象

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

    1. const canvas = document.querySelector('#canvas')
    2. canvas.height = window.innerHeight
    3. canvas.width = window.innerWidth
    4. const ctx = canvas.getContext(‘2d’)
    • 设置画笔颜色与图形形状
    1. ctx.fillStyle = 'red'
    2. ctx.fillRect(0, 0, 500, 500)

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

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

    1.     "robot" width="200" height="200">
    2.  
    3.     <script>
    4.         const canvas = document.getElementById('robot');
    5.         const ctx = canvas.getContext('2d');
    6.  
    7.         //fillStyle=>设置填充区域的颜色
    8.         ctx.fillStyle = 'gray';
    9.         //strokeStyle=>设置描边的颜色
    10.         ctx.strokeStyle = 'black';
    11.         //lineWidth=>设置描边的宽度
    12.         ctx.lineWidth = 2;
    13.  
    14.         // 在Canvas绘图中，每个新的路径（line、rect、arc等）都会自动连接到之前绘制的路径上。如果希望绘制一个新的路径，就需要使用beginPath()方法来开启一个新路径
    15.         ctx.beginPath();
    16.         // 以 (x, y) 为圆心，半径为 r，从 startAngle 开始，到 endAngle 结束，画一个弧形
    17.         ctx.arc(100, 100, 50, 0, Math.PI * 2);
    18.         console.log(Math.PI) //3.1415926
    19.         //对路径进行填充。
    20.         ctx.fill();
    21.         //对路径进行描边。
    22.         ctx.stroke();
    23.  
    24.         // 画眼睛
    25.         ctx.fillStyle = 'white';
    26.         ctx.beginPath();
    27.         ctx.arc(75, 70, 10, 0, Math.PI * 2);
    28.         ctx.arc(125, 70, 10, 0, Math.PI * 2);
    29.         ctx.fill();
    30.  
    31.         // 画瞳孔
    32.         ctx.fillStyle = 'black';
    33.         ctx.beginPath();
    34.         ctx.arc(75, 70, 3, 0, Math.PI * 2);
    35.         ctx.arc(125, 70, 3, 0, Math.PI * 2);
    36.         ctx.fill();
    37.  
    38.         // 画嘴巴
    39.         ctx.beginPath();
    40.         ctx.moveTo(70, 130);
    41.         ctx.bezierCurveTo(70, 140, 130, 140, 130, 130);
    42.         ctx.stroke();
    43.  
    44.         // 画腮红
    45.         ctx.fillStyle = 'pink';
    46.         ctx.beginPath();
    47.         ctx.arc(60, 110, 10, 0, Math.PI * 2);
    48.         ctx.arc(140, 110, 10, 0, Math.PI * 2);
    49.         ctx.fill();
    50.     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 从入门到劝朋友放弃（图解版）✨ - 知乎

     效果图：

    创建一个动态的时间

    1.         function updateTime() {
    2.             var now = new Date();
    3.             var today = now.toDateString();
    4.             var time = now.toLocaleTimeString();
    5.             var hours = now.getHours();
    6.             var minutes = now.getMinutes();
    7.             var seconds = now.getSeconds();
    8.  
    9.             var minutesString = minutes.toString().padStart(2, '0')
    10.             var secondsString = seconds.toString().padStart(2, '0');
    11.             var timeString = hours + ":" + minutesString + ":" + secondsString;
    12.             $("h1").text(timeString);
    13.         }
    14.         updateTime()
    15.         setInterval(updateTime, 1000);

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

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

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

    1.     var canvas = document.getElementById("canvas");
    2.     var ctx = canvas.getContext("2d");
    3.     // 线条宽度、线条末端样式、阴影模糊度
    4.     ctx.lineWidth = 15;
    5.     ctx.lineCap = "round";
    6.     ctx.shadowBlur = 15;
    7.     // 将角度值转换为弧度值
    8.     function degToRad(degree) {
    9.         var factor = Math.PI / 180;
    10.         return degree * factor;
    11.     }
    12.  
    13.     // 转换数值 360度转换成24份,并修正从0点开始
    14.     function convertNum(num) {
    15.         return degToRad(num * 15 - 90);
    16.     }
    17.     function draw() {
    18.         ctx.strokeStyle = "#42dfbf";
    19.         ctx.shadowColor = '#95e0d1';
    20.  
    21.         // 创建了一个径向渐变对象
    22.         gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 150);
    23.         ctx.fillStyle = gradient;
    24.         ctx.fillRect(0, 0, 400, 400);
    25.  
    26.         // 0点到3点
    27.         // beginPath 开始一个新的绘图路径
    28.         ctx.beginPath();
    29.         // arc 方法绘制了一个弧线
    30.         ctx.arc(200, 200, 170, convertNum(0), convertNum(4));
    31.         // stroke 方法绘制出刻度线
    32.         ctx.stroke();
    33.  
    34.         // 7到8
    35.         ctx.beginPath();
    36.         ctx.arc(200, 200, 170, convertNum(7), convertNum(8));
    37.         ctx.stroke();
    38.  
    39.         // 14-16
    40.         ctx.beginPath();
    41.         ctx.arc(200, 200, 170, convertNum(14), convertNum(16));
    42.         ctx.stroke();
    43.     }
    44.     draw();

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

    1.     var canvas = document.getElementById("canvas");
    2.     var ctx = canvas.getContext("2d");
    3.     // 线条宽度、线条末端样式、阴影模糊度
    4.     ctx.lineWidth = 15;
    5.     ctx.lineCap = "round";
    6.     ctx.shadowBlur = 15;
    7.     // 将角度值转换为弧度值
    8.     function degToRad(degree) {
    9.         var factor = Math.PI / 180;
    10.         return degree * factor;
    11.     }
    12.     // 绘制表盘刻度线
    13.     function drawClockFace() {
    14.         ctx.shadowColor = '#40b7c6';
    15.         ctx.strokeStyle = "#90bdc3";
    16.         for (var i = 0; i < 24; i++) {
    17.             var angle = degToRad(i * 15 - 90);
    18.             ctx.beginPath();
    19.             ctx.arc(200, 200, 170, angle, angle + degToRad(0.5));
    20.  
    21.             if (i % 3 === 0) {
    22.                 // 绘制文本
    23.                 ctx.save();
    24.                 ctx.translate(200, 200); // 将坐标原点移动到表盘中心
    25.                 ctx.rotate(angle + Math.PI / 2); // 旋转文本使其与刻度对齐
    26.                 ctx.textAlign = "center";
    27.                 ctx.font = "bold 20px Arial";
    28.                 ctx.fillStyle = "#fff";
    29.                 ctx.fillText(i.toString(), 0, -163); // 在指定位置绘制文本
    30.                 ctx.restore();
    31.             } else {
    32.                 // 绘制圆点
    33.                 ctx.stroke();
    34.             }
    35.         }
    36.     }
    37.     drawClockFace();

    完整代码： 

    1. html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="UTF-8" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8. head>
    9. <style>
    10.     body {
    11.         background-color: gray;
    12.     }
    13.  
    14.     .content {
    15.         position: relative;
    16.         display: flex;
    17.         justify-content: center;
    18.     }
    19.  
    20.     h1 {
    21.         font-family: helvetica;
    22.         font-size: 2.5rem;
    23.         color: black;
    24.         position: absolute;
    25.         top: 38%;
    26.         z-index: -1;
    27.     }
    28.  
    29.     #canvas {
    30.         display: block;
    31.         margin: 5vh auto;
    32.         border-radius: 50%;
    33.         box-shadow: 0 5px 14px black;
    34.     }
    35. style>
    36.  
    37. <body>
    38.     <div class="content">
    39.         <h1>h1>
    40.         <canvas id="canvas" width="400" height="400">canvas>
    41.     div>
    42. body>
    43. <script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.js">script>
    44. <script>
    45.     var canvas = document.getElementById("canvas");
    46.     var ctx = canvas.getContext("2d");
    47.     // 线条宽度、线条末端样式、阴影模糊度
    48.     ctx.lineWidth = 15;
    49.     ctx.lineCap = "round";
    50.     ctx.shadowBlur = 15;
    51.     // 将角度值转换为弧度值
    52.     function degToRad(degree) {
    53.         var factor = Math.PI / 180;
    54.         return degree * factor;
    55.     }
    56.     // 绘制表盘刻度线
    57.     function drawClockFace() {
    58.         ctx.shadowColor = '#40b7c6';
    59.         ctx.strokeStyle = "#90bdc3";
    60.         for (var i = 0; i < 24; i++) {
    61.             var angle = degToRad(i * 15 - 90);
    62.             ctx.beginPath();
    63.             ctx.arc(200, 200, 170, angle, angle + degToRad(0.5));
    64.  
    65.             if (i % 3 === 0) {
    66.                 // 绘制文本
    67.                 ctx.save();
    68.                 ctx.translate(200, 200); // 将坐标原点移动到表盘中心
    69.                 ctx.rotate(angle + Math.PI / 2); // 旋转文本使其与刻度对齐
    70.                 ctx.textAlign = "center";
    71.                 ctx.font = "bold 20px Arial";
    72.                 ctx.fillStyle = "#fff";
    73.                 ctx.fillText(i.toString(), 0, -163); // 在指定位置绘制文本
    74.                 ctx.restore();
    75.             } else {
    76.                 // 绘制圆点
    77.                 ctx.stroke();
    78.             }
    79.         }
    80.     }
    81.  
    82.     draw();
    83.     drawClockFace();
    84.  
    85.  
    86.     // 转换数值 360度转换成24份,并修正从0点开始
    87.     function convertNum(num) {
    88.         return degToRad(num * 15 - 90);
    89.     }
    90.     function draw() {
    91.         ctx.strokeStyle = "#42dfbf";
    92.         ctx.shadowColor = '#95e0d1';
    93.         function updateTime() {
    94.             var now = new Date();
    95.             var today = now.toDateString();
    96.             var time = now.toLocaleTimeString();
    97.             var hours = now.getHours();
    98.             var minutes = now.getMinutes();
    99.             var seconds = now.getSeconds();
    100.  
    101.             var minutesString = minutes.toString().padStart(2, '0')
    102.             var secondsString = seconds.toString().padStart(2, '0');
    103.             var timeString = hours + ":" + minutesString + ":" + secondsString;
    104.             $("h1").text(timeString);
    105.         }
    106.         updateTime()
    107.         setInterval(updateTime, 1000);
    108.  
    109.         // 创建了一个径向渐变对象
    110.         gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 150);
    111.         ctx.fillStyle = gradient;
    112.         ctx.fillRect(0, 0, 400, 400);
    113.  
    114.         // 0点到3点
    115.         // beginPath 开始一个新的绘图路径
    116.         ctx.beginPath();
    117.         // arc 方法绘制了一个弧线
    118.         ctx.arc(200, 200, 170, convertNum(0), convertNum(4));
    119.         // stroke 方法绘制出刻度线
    120.         ctx.stroke();
    121.  
    122.         // 7到8
    123.         ctx.beginPath();
    124.         ctx.arc(200, 200, 170, convertNum(7), convertNum(8));
    125.         ctx.stroke();
    126.  
    127.         // 14-16
    128.         ctx.beginPath();
    129.         ctx.arc(200, 200, 170, convertNum(14), convertNum(16));
    130.         ctx.stroke();
    131.     }
    132. script>
    133.  
    134. html>

    动态添加水印 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9.  
    10. <body>
    11.     <div id="content" style="width: 400px;height: 400px;background-color: antiquewhite;">
    12.         你好
    13.     div>
    14.     <script>
    15.         /**
    16.      * 动态添加水印
    17.      * @param {String} str 水印内容
    18.      */
    19.         function addWaterMark(str) {
    20.             const body = document.getElementById('content');
    21.             const canvas = document.createElement('canvas');
    22.  
    23.             body.appendChild(canvas);
    24.  
    25.             canvas.width = 200;
    26.             canvas.height = 200;
    27.             canvas.style.display = 'none';
    28.             var cans = canvas.getContext('2d');
    29.             cans.rotate((-20 * Math.PI) / 180);
    30.             cans.font = '12px Microsoft JhengHei';
    31.             cans.fillStyle = 'rgba(17, 17, 17, 1)';
    32.             cans.textAlign = 'left';
    33.             cans.textBaseline = 'Middle';
    34.             // 表示在  上绘制一段文本，起始位置为左上角的 (30, 105)，并且文本的最大宽度限制为 200。水印的文本内容将会从 (30, 105) 开始，并在指定的最大宽度内绘制
    35.             cans.fillText(str, 0, 130, 200);
    36.             body.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
    37.         }
    38.         addWaterMark("阿晨出品 必然精品")
    39.     script>
    40. body>
    41.  
    42. html>

  • 相关阅读:
    10.1作业
    短视频矩阵系统源代码开发搭建分享--代码开源SaaS
    【基础篇】三、SpringBoot基础配置
    【数据结构】二叉树详解
    Vue 监听store数据变化
    Qt Quick Controls 2如何自定义样式
    Unity碰撞检测（3D和2D）
    【ArcGIS】基于DEM/LUCC等数据统计得到各集水区流域特征
    谈谈讲清楚这件事的重要性
    关于使用GB28181协议实现与大华摄像机的语音对讲功能小记
  • 原文地址：https://blog.csdn.net/weixin_52479803/article/details/134504888