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

  初识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到8ctx.beginPath();ctx.arc(200, 200, 170, convertNum(7), convertNum(8));ctx.stroke();// 14-16ctx.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到8ctx.beginPath();ctx.arc(200, 200, 170, convertNum(7), convertNum(8));ctx.stroke();// 14-16ctx.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.mzph.cn/news/149117.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

QPair的介绍及用法

QPair的介绍及用法

QPair是一个模板类&#xff0c;它存储一对值&#xff08;key&#xff0c;value&#xff09;&#xff0c;可以是不同的数据类型。QPair的用法有以下几个方面&#xff1a; QPair的构造函数有以下几种形式&#xff1a; QPair()&#xff1a;默认构造函数&#xff0c;创建一个空的QP…
阅读更多...
Leetcode2937. 使三个字符串相等

Leetcode2937. 使三个字符串相等

Every day a Leetcode 题目来源&#xff1a;2937. 使三个字符串相等 解法1&#xff1a;枚举 设 len1、len2、len3 分别为字符串 s1、s2、s3 的长度。 min_len 是 3 个字符串长度的最小值。 枚举 len min_len 到 len 1&#xff0c;设 t1、t2、t3 分别是字符串 s1、s2、s…
阅读更多...
全链路监控--pinpoint

全链路监控--pinpoint

一、pinpoint架构原理 架构组成 Pinpoint Agent:和自己运行的应用关联起来的探针 Pinpoint Collector:收集各种性能数据 Pinpoint-Web: 将收集到的数据显成为 WEB网页显示 HBase Storage: 存储收集到的数据 工作原理 pinpoint的核心思想是在各个服务节点之间彼此调用时&a…
阅读更多...
flask创建步骤

flask创建步骤

1.在__init__.py中创建db对象 from flask_sqlalchemy import SQLAlchemy db SQLAlchemy()2.同样的在__init__.py中create_app函数中让app传入到db中 def create_app():app Flask(__name__)app.config.from_object(settings.DevelopmentConfig)app.register_blueprint(ac)ap…
阅读更多...
Unity 6 是下一个 LTS 版本即将发布

Unity 6 是下一个 LTS 版本即将发布

Unity 公司宣布&#xff0c;即将发布 Unity 6&#xff0c;并表示其为下一个长期支持版本 (LTS)。 Unity 在大会上演示了全新的 Unity 6引擎&#xff0c;并通过 Syncy Studios 采用 Unity 6 制作的《幻想王国&#xff08;Fantasy Kingdom&#xff09;》Demo 进行了演示&#xff…
阅读更多...
面试题 三

面试题 三

一、this 手写call //1、定义myCall方法 //3、接收剩余参数并返回结果 Function.prototype.myCall function (thisArg, ...arg) {// console.log(thisArg); //person对象// console.log(this); //func方法//2、设置this并调用原函数//下面三行代码有个缺陷就是如果pers…
阅读更多...
JS算法练习 11.20

JS算法练习 11.20

leetcode 2629 复合函数 请你编写一个函数&#xff0c;它接收一个函数数组 [f1, f2, f3&#xff0c;…&#xff0c; fn] &#xff0c;并返回一个新的函数 fn &#xff0c;它是函数数组的 复合函数 。 [f(x)&#xff0c; g(x)&#xff0c; h(x)] 的 复合函数 为 fn(x) f(g(h(…
阅读更多...
「Verilog学习笔记」边沿检测

「Verilog学习笔记」边沿检测

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1ns module edge_detect(input clk,input rst_n,input a,output reg rise,output reg down );reg a_tem ; always (posedge clk or negedge rst_n) beginif…
阅读更多...
Spark作业串行与并行提交job

Spark作业串行与并行提交job

在Scala中&#xff0c;您可以以串行和并行的方式提交Spark作业。看看如何使用for和par.foreach构造对应的例子。 串行Spark作业&#xff08;使用for&#xff09; // 串行Spark作业设置 for (tag <- tags) {spark.sparkContext.setJobGroup(tag.toString, s"Tag: $tag…
阅读更多...
分布式原理

分布式原理

目录 1. 分布式原理1.1. 关系型数据库遵循 ACID 规则1.2. 分布式系统1.2.1. 分布式计算的优点1.2.2. 分布式计算的缺点 1.3. CAP 定理 (CAP theorem)1.4. BASE1.5. ACID vs BASE 1. 分布式原理 1.1. 关系型数据库遵循 ACID 规则 事务在英文中是 transaction, 和现实世界中的交…
阅读更多...
我的256天创作纪念日

我的256天创作纪念日

今天是我成为创作者的第256天纪念日&#xff0c;感谢CSDN官方的纪念信让我铭记这特殊的一天。 机缘 256天前&#xff0c;我怀着满满的好奇和期待&#xff0c;开始了我在CSDN的创作之旅。当时的我&#xff0c;是一个内向的计算机小白&#xff0c;对于写博客这件事还一无所知。…
阅读更多...
Windows10 MYSQL Installer 安装（mysql-installer-community-5.7.19.0.msi）

Windows10 MYSQL Installer 安装（mysql-installer-community-5.7.19.0.msi）

分类 编程技术 1.进入官网找到自己所需的安装包&#xff1a;https://dev.mysql.com/ &#xff0c;路径&#xff1a;DOWNLOAD-->MYSQL Community Edition(GRL)-->MYSQL on Windows (Installer & Tool) 或直接点击 MySQL :: Download MySQL Installer 查看最新版本。…
阅读更多...
uniapp+vue+Springboot 公司网站0~1搭建 前端前期设计篇

uniapp+vue+Springboot 公司网站0~1搭建 前端前期设计篇

原型图 client https://www.xiaopiu.com/h5/byId?typeproject&id653bc791940bbb14e4feeecf admin 客户端 apph5 页面 首页展示 经典用户案例轮播图设计师轮播图 经典用户案例 经典案例搜索详情经典案例详情 设计师查询&#xff08;待定&#xff09; 后台管理 ​ …
阅读更多...
bhosts 显示节点 “unreach“ 状态

bhosts 显示节点 “unreach“ 状态

4.1、bhosts简单使用 查看各节点情况&#xff0c;包括状态和正在运行的 Job 情况等 STATUS列展示节点状态 OK&#xff1a;可用——可接受新的作业的正常状态 unavail&#xff1a;不可用 可能原因&#xff1a;主机关闭&#xff0c;LIM和sbatchd不可达 unreach&#xff1a;无法连…
阅读更多...
【笔记1-2】Qt系列：QkeyEvent 键盘事件 设定快捷键

【笔记1-2】Qt系列：QkeyEvent 键盘事件 设定快捷键

参考文献 QKeyEvent 类用来描述一个键盘事件。当键盘按键被按下或者被释放时&#xff0c;键盘事件便会被发送给拥有键盘输人焦点的部件。QKeyEvent 的 key() 函数可以获取具体的按键关键字。需要特别说明的是&#xff0c;回车键在这里是 Qt::Key_Return&#xff1b;键盘上的一…
阅读更多...
《LeetCode力扣练习》代码随想录——链表（链表相交---Java）

《LeetCode力扣练习》代码随想录——链表（链表相交---Java）

《LeetCode力扣练习》代码随想录——链表&#xff08;链表相交—Java&#xff09; 刷题思路来源于 代码随想录 面试题 02.07. 链表相交 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) {* …
阅读更多...
基于SpringBoot的SSMP整合案例（业务层基础开发与快速开发）

基于SpringBoot的SSMP整合案例（业务层基础开发与快速开发）

业务层基础开发 接口类public interface BookService {boolean save(Book book);boolean update(Book book);boolean delete(Integer id);Book getById(Integer id);List<Book> getAll();IPage<Book> getByPage(int currentPage,int pageSize);IPage<Book> …
阅读更多...
ARTS 打卡第一周

ARTS 打卡第一周

ARTS AlgorithmReviewTipShare Algorithm 题目 class Solution {func mergeAlternately(_ word1: String, _ word2: String) -> String {var ans ""var idx1 word1.startIndexvar inx2 word2.startIndexwhile idx1 < word1.endIndex || idx2 < word2.e…
阅读更多...
【随想】每日两题Day.17

【随想】每日两题Day.17

题目&#xff1a;232. 用栈实现队列 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移…
阅读更多...
Linux | C语言中volatile关键字的理解

Linux | C语言中volatile关键字的理解

目录 前言 一、代码引入 二、现象解释 三、具体引用 前言 本章主要讲解介绍volatile关键的作用与使用场合&#xff1b;深刻理解volatile关键字&#xff1b;本文你需要有信号相关的基础知识&#xff1b; Linux | 信号-CSDN博客 一、代码引入 首先&#xff0c;我们来查看下面…
阅读更多...
最新文章

Copyright @ 2022~2023