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

news2024/11/15 2:09:26

  初识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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1229365.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】​——多态性与模板(其一)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

2023年中国稀土精密加工分类、市场规模及发展趋势分析[图]

稀土精密加工行业是指通过精密加工技术对稀土材料进行加工、制造和加工成品的一种行业。稀土精密加工行业主要包括稀土材料的提取、分离、纯化、加工和制造等环节&#xff0c;其中加工和制造是该行业的核心环节。稀土材料是指具有特殊物理、化学和磁性等性质的一类元素&#xf…

Oracle for Windows安装和配置——Oracle for Windows net配置

2.3. Oracle for Windows net配置 2.3.1. Oracle net配置 2.3.1.1. Oracle net简介 前述章节中,我们只是安装了数据库软件,创建了数据库,测试在服务器本地连接查询数据库。但还不能通过网络远程连接访问数据库,因为我们还没配置用来远程连接访问该数据库的组件Oracle ne…

数字IC前端学习笔记:时钟切换电路

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 有些时候我们需要在系统运行时切换系统时钟&#xff0c;最简单的方法就是使用一个MUX&#xff08;数据选择器&#xff09;选择输出的时钟&#xff0c;如下代码片所…

提取图像文本的 5 大 Python 库

引言 光学字符识别是一个古老但依然具有挑战性的问题&#xff0c;涉及从非结构化数据中&#xff08;包括图像和PDF文档&#xff09;检测和识别文本。它在银行、电子商务和社交媒体内容管理等领域具有广泛的应用。 但与数据科学中的每个主题一样&#xff0c;尝试学习如何解决OC…

YOLOv8改进 | EIoU、SIoU、WIoU、DIoU、FocusIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了YOLOv8的重大改进&#xff0c;特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体&#xff0c;如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU&#xff0c;还融合了“Focus”思想&#xff0c;创造了一系列新的损失函数。这些组合形式的…

OpenAI 地震!首席执行官被解雇,背后的原因是?

11月17日&#xff0c;ChatGPT的制造商OpenAI表示&#xff0c;经过审查后发现联合创始人兼首席执行官 Sam Altman与董事会“沟通时并不一贯坦诚”&#xff0c;因此公司已经决定解雇他。这家人工智能&#xff08;AI&#xff09;公司在一份声明中表示&#xff1a;“董事会不再相信…

美团外卖9元每周星期一开工外卖红包优惠券怎么领取?

美团外卖9元周一开工红包活动时间是什么时候&#xff1f; 美团外卖9元周一开工红包优惠券是指每周星期一可以领取的美团外卖红包优惠券&#xff0c;在美团外卖周一开工红包领取活动时间内可领取到9元周一开工美团外卖红包优惠券&#xff1b;&#xff08;温馨提醒&#xff1a;如…

2023年中国全自动烘干机产业链、产能及发展趋势分析[图]

全自动烘干机设备是工业化生产制造过程中不可缺少的一种机械设备设备&#xff0c;它广泛应用于工业化工原料加工中药材烘干、农副产品加工等&#xff0c;因此制造了多种干燥设备&#xff0c;目前有多层网带干燥机、热泵干燥机、微波干燥机和冷冻干燥机四种自动干燥机&#xff0…

jetbrains ai 提示该地区不可用的百分百解决方案,亲测有效

问题 申请 jetbrains 的 ai assistant 白名单已经通过&#xff0c;但是在使用 ai assistant 的过程中提示 The usage of the service is not permitted in your location ,我所在的地区是中国&#xff0c;目前该插件是对中国大陆关闭的。 刚开始我怀疑是代理的问题&#xff…

ckplayer自己定义风格播放器的开发记录

CKplayer是一款基于Flash和HTML5技术的开源视频播放器&#xff0c;支持多种格式的音视频播放&#xff0c;并且具有优秀的兼容性和扩展性。 它不仅可以在网页上播放本地或者网络上的视频&#xff0c;还可以通过代码嵌入到网页中&#xff0c;实现更加个性化的播放效果。CKplayer…

【cpolar】搭建我的世界Java版服务器,公网远程联机

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;cpolar&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言&#xff1a; 1. 搭建我的世界服务器 1.1 服务器安装java环境 1.2 配置服务端 2. 测试局域网联机 3. 公网远程联机 3.1 安…

【Java程序员面试专栏 专业技能篇】Java SE核心面试指引(一):基础知识考察

关于Java SE部分的核心知识进行一网打尽,包括四部分:基础知识考察、面向对象思想、核心机制策略、Java新特性,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 本篇Blog为第一部分:基础知识考察,子节点表示追问或同级提问 基本概念 …

数据仓库高级面试题

数仓高内聚低耦合是怎么做的 定义 高内聚&#xff1a;强调模块内部的相对独立性&#xff0c;要求模块内部的元素尽可能的完成一个功能&#xff0c;不混杂其他功能&#xff0c;从而使模块保持简洁&#xff0c;易于理解和管理。 低耦合&#xff1a;模块之间的耦合度要尽可能的…

壹基金为爱同行走进绿水青山,为乡村儿童送去健康水

壹基金为爱同行公益践行活动发起于2013年,截至2022年底,累计有63,319名线下参与队员,走过了8个城市。2023年,为爱同行的“壹家人”再次出发,走进“绿水青山就是金山银山”理念诞生地——浙江安吉余村,徒步18公里,为乡村儿童喝上足量、干净的饮用水筹集善款。本次活动获得了当地…

CorelDraw2024(CDR)- 矢量图制作软件介绍

在当今数字化时代&#xff0c;平面设计已成为营销、品牌推广和创意表达中不可或缺的元素。平面设计必备三大软件Adebo PhotoShop、CorelDraw、Adobe illustrator, 今天小编就详细介绍其中之一的CorelDraw软件。为什么这款软件在设计界赢得了声誉&#xff0c;并成为了设计师的无…

深度学习之基于YoloV5-Pose的人体姿态检测可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 深度学习之基于 YOLOv5-Pose 的人体姿态检测可视化系统介绍YOLOv5-Pose 简介系统特点系统架构使用方法 二、功能三、系统四. 总结 一项目简介 深度学习之基…

大白话解释什么类加载机制

大家好&#xff0c;我是伍六七。 今天我们来聊聊一个 Java 面试必考基础题目&#xff1a;类加载机制和双亲委派机制。 Java 类的加载机制是 Java 虚拟机&#xff08;JVM&#xff09;中类加载&#xff08;Class Loading&#xff09;和链接&#xff08;Linking&#xff09;的过…

大学生如何免费认证,下载,安装MATLAB

下载 打开学校图书馆官网 选择版本后&#xff0c;点击下载 注册绑定个人认证 前提&#xff01;需要有学校邮箱【以edu.cn结尾的】 进入mathworks官网 注册账户 安装 下载完后&#xff0c;打开 选择&#xff1a;setup 安装程序 勾选&#xff1a;是&#xff1b;选择&#xf…

【汇编】数据在哪里?有多长、div指令实现除法、dup设置内存空间

文章目录 前言一、汇编语言中数据位置的表达1.1 汇编中有哪几种数1.立即数&#xff08;idata&#xff09;&#xff1a;2.寄存器&#xff08;Register&#xff09;&#xff1a;3.内存&#xff08;Memory&#xff09;&#xff1a;4.段地址&#xff08;Segment Address&#xff0c…