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

canvas基础+应用+实例

news 文章来源：https://blog.csdn.net/m0_51244077/article/details/143349218 2025/1/15 19:34:00

文章目录

- Canvas基础知识要点
- 一、基本概念
- 二、常用参数
- 三、实例
- 四、场景应用说明
- 完结

Canvas基础知识要点

一、基本概念

Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布，开发者可以在上面使用JavaScript的API来绘制各种图形。

二、常用参数

beginPath、moveTo、lineTo和strokeStyle的应用
- 以下是一个简单的示例，使用canvas绘制一个三角形。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 设置线条颜色ctx.strokeStyle = 'blue';// 开始一个新路径ctx.beginPath();// 移动到起始点ctx.moveTo(50, 50);// 绘制第一条边ctx.lineTo(150, 50);// 绘制第二条边ctx.lineTo(100, 150);// 闭合路径（对于填充图形很重要，这里主要是为了展示完整路径）ctx.closePath();// 绘制线条ctx.stroke();
</script>
```
- 在这个例子中：
  - beginPath用于开始一个新的绘制路径。这是很重要的，因为如果不使用它，后续的绘制命令会和之前的路径合并。
  - moveTo将绘图“笔尖”移动到指定的坐标(50, 50)，这个点是三角形的一个顶点。
  - lineTo用于从当前点（由moveTo指定或者上一个lineTo结束的点）绘制一条直线到指定的坐标。这里绘制了三角形的两条边。
  - strokeStyle用于设置线条的颜色，这里设置为蓝色。最后stroke方法用于实际绘制路径的轮廓。

arc的应用

下面的示例绘制一个圆形。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();// 圆心坐标为(100, 100)，半径为50，起始角度为0，结束角度为2 * Math.PI（一个完整的圆）ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.strokeStyle ='red';ctx.stroke();
</script>

对于arc方法：
- 它的参数依次是圆心的x坐标、圆心的y坐标、圆的半径、起始弧度和结束弧度。这里通过设置起始弧度为0，结束弧度为2 * Math.PI（约等于6.28）来绘制一个完整的圆。圆心坐标为(100, 100)，半径为50。最后设置线条颜色为红色并绘制出圆形。

quadraticCurveTo的应用
- 这个方法用于绘制二次贝塞尔曲线。下面是一个简单的示例，绘制一条二次贝塞尔曲线。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(20, 180);// 控制点坐标为(100, 20)，结束点坐标为(180, 180)ctx.quadraticCurveTo(100, 20, 180, 180);ctx.strokeStyle = 'green';ctx.stroke();
</script>
```
- 解释：
  - 首先moveTo将起始点设置为(20, 180)。然后quadraticCurveTo方法用于绘制二次贝塞尔曲线，它有三个参数。第一个参数是控制点的x坐标，第二个参数是控制点的y坐标，第三个参数是曲线结束点的x坐标和y坐标。在这个例子中，控制点是(100, 20)，结束点是(180, 180)。最后设置线条颜色为绿色并绘制出曲线。
渐变的应用（线性渐变）
- 以下示例展示如何在canvas中使用线性渐变。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 创建一个线性渐变对象const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);linearGradient.addColorStop(0,'red');linearGradient.addColorStop(1, 'blue');ctx.beginPath();ctx.lineWidth = 50;ctx.moveTo(0, 0);ctx.lineTo(200, 0);ctx.strokeStyle = linearGradient;ctx.stroke();
</script>
```
- 步骤如下：
  - 首先使用createLinearGradient方法创建一个线性渐变对象。它的参数是渐变的起始点x坐标、起始点y坐标、结束点x坐标和结束点y坐标。这里创建的是一个从左到右（x轴方向）的渐变。
  - 然后使用addColorStop方法为渐变添加颜色停止点。第一个参数是位置（取值范围是0到1），第二个参数是颜色。这里在0位置添加红色，在1位置添加蓝色。
  - 接着开始路径，绘制一条直线（从(0, 0)到(200, 0)），并将strokeStyle设置为刚才创建的线性渐变，最后绘制出渐变线条。
填充应用（fill）
- 以下示例绘制一个填充颜色的矩形。
```
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.rect(50, 50, 100, 100);ctx.fillStyle = 'yellow';ctx.fill();
</script>
```
- 解释：
  - 首先beginPath开始一个新路径，然后rect方法用于定义一个矩形，它的参数依次是矩形左上角的x坐标、左上角的y坐标、矩形的宽度和高度。这里定义了一个左上角坐标为(50, 50)，宽度为100，高度为100的矩形。
  - fillStyle设置填充颜色为黄色，最后fill方法用于填充这个矩形。。

三、实例

绘制一个笑脸
效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<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>Document</title></head><body><!-- id：标识元素的唯一性width:画布的宽度height:画布的高度--><canvas id="c1" width="600" height="400">当前浏览器不支持canvas，请下载最新的浏览器<a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 判断是否有getContextif (!c1.getContext) {console.log("当前浏览器不支持canvas，请下载最新的浏览器");}// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");ctx.beginPath();//  绘制一张脸ctx.arc(75, 75, 50, 0, Math.PI * 2);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制嘴巴ctx.arc(75, 75, 35, 0, Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制左眼ctx.arc(60, 65, 5, 0, Math.PI * 2);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制右眼ctx.arc(90, 65, 5, 0, Math.PI * 2);ctx.closePath();ctx.stroke();</script></body>
</html>

绘制一个刮刮卡

效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<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>Document</title><style>* {margin: 0;padding: 0;}#ggk {width: 600px;height: 400px;font-size: 30px;font-weight: 900;text-align: center;line-height: 400px;overflow: hidden;position: absolute;left: 0;top: 0;}canvas {position: absolute;left: 0;top: 0;z-index: 10;}</style></head><body><!-- id：标识元素的唯一性width:画布的宽度height:画布的高度--><div id="ggk">谢谢惠顾</div><canvas id="c1" width="600" height="400"></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");// 3. 绘制图形let img = new Image();img.src = "./imgs/m2.png";img.onload = function () {ctx.drawImage(img, 0, 0, 600, 400);};var isDraw = false;c1.onmousedown = function () {isDraw = true;};c1.onmouseup = function () {isDraw = false;};c1.onmousemove = function (e) {if (isDraw) {var x = e.pageX;var y = e.pageY;ctx.globalCompositeOperation = "destination-out";ctx.arc(x, y, 20, 0, 2 * Math.PI);ctx.fill();}};let random = Math.random();if (random < 0.1) {var ggkDiv = document.querySelector("#ggk");ggkDiv.innerHTML = "恭喜您获得canvas 惊喜镜头大奖！";}</script></body>
</html>

绘制文本
效果图如下

在这里插入图片描述

<!DOCTYPE html>
<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>Document</title></head><body><!-- id：标识元素的唯一性width:画布的宽度height:画布的高度--><canvas id="c1" width="600" height="400">当前浏览器不支持canvas，请下载最新的浏览器<a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 判断是否有getContextif (!c1.getContext) {console.log("当前浏览器不支持canvas，请下载最新的浏览器");}// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");// 文字，大小/字体ctx.strokeStyle = "#ff0000";ctx.font = "100px Microsoft YaHei";// 填充渲染文字// fillText(文本，文本的起点x,文本起点的y,绘制文字最大的宽度)// ctx.fillText("你好", 300, 200, 100);// 文本对齐选项textAlign,start(默认),end,left,right,centerctx.textAlign = "center";// 文本基线对齐,textBaseline,top,bottom,alphabeticctx.textBaseline = "middle";// 文本的方向// ctx.direction = "rtl";// 预测量文本宽度let text = ctx.measureText("Hello world!");console.log(text);ctx.strokeText("Hello world!", 300, 200);ctx.arc(270, 200, 5, 0, 2 * Math.PI);ctx.fill();</script></body>
</html>

四、场景应用说明

数据可视化
- Canvas在数据可视化领域应用广泛。例如，可以使用Canvas绘制柱状图、折线图、饼图等。
- 以绘制简单的柱状图为例，通过获取数据集中每个数据项的值，根据画布的尺寸和数据范围，使用fillRect方法绘制不同高度的矩形来表示数据。这样可以直观地展示数据的大小关系和分布情况。
游戏开发
- 在网页游戏开发中，Canvas是重要的工具。可以用于绘制游戏角色、地图、道具等各种游戏元素。
- 例如，在一个2D横版过关游戏中，通过不断更新游戏角色的位置（使用translate等方法），并重新绘制游戏场景（包括背景、障碍物、敌人等），实现游戏的动态效果。同时，可以通过处理用户的输入事件（如键盘按键或鼠标点击）来控制游戏角色的行为。
动画制作
- Canvas可以制作各种动画，如简单的图形动画、加载动画等。
- 比如制作一个旋转的正方形动画。通过setInterval或requestAnimationFrame函数，在每一帧中更新正方形的旋转角度，然后重新绘制这个带有旋转效果的正方形，从而实现动画效果。requestAnimationFrame是更推荐的方式，因为它会根据浏览器的刷新率来优化动画的性能。

完结

在这里插入图片描述

canvas基础+应用+实例

文章目录 Canvas基础知识要点一、基本概念二、常用参数三、实例四、场景应用说明完结 Canvas基础知识要点一、基本概念 Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布…...

编程日记 2024/10/30 1:25:59

Linux命令用户操作简介

目录 1. 添加新的用户账号 2. 删除用户账号 3. 修改用户账号 4. 用户口令的管理示例汇总添加新用户删除用户修改用户信息更改用户口令在 Linux 系统中，用户管理是一项重要的任务，包括添加新用户、删除用户、修改用户信息以及管理用户口令…...

编程日记 2024/10/30 1:24:58

大语言模型的Scaling Law【Power Low】

NLP-大语言模型学习系列目录一、注意力机制基础——RNN,Seq2Seq等基础知识二、注意力机制【Self-Attention,自注意力模型】三、Transformer图文详解【Attention is all you need】四、大语言模型的Scaling Law【Power Low】文章目录 NLP-大语言模型学习系列目录一、什么是…...

编程日记 2024/10/30 1:23:57

windows环境下，使用docker搭建redis集群

参考： https://blog.csdn.net/weixin_46594796/article/details/137864842 https://www.cnblogs.com/niceyoo/p/14118146.html 史上最详细Docker搭建Redis Cluster集群环境值得收藏每步都有图，不用担心学不会-腾讯云开发者社区-腾讯云一、基础环境描述宿主机：192.168…...

编程日记 2024/10/30 1:22:56

Python(pandas库3)

函数随机抽样语法： n：要抽取的行数 frac：抽取的比例，比如 frac0.5，代表抽取总体数据的50% axis：示在哪个方向上抽取数据(axis1 表示列/axis0 表示行) 案例： 输出结果都为随机抽取。空…...

编程日记 2024/10/30 1:19:54

WPF+MVVM案例实战（十）- 水波纹按钮实现与控件封装

文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现2、使用封装的按钮控件1.主界面引用2.按钮属性设置3 总结1、运行效果 1、封装用户控件 1、创建文件打开 Wpf_Examples 项目，在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ，修改 Us…...

编程日记 2024/10/30 1:16:51

数据结构————map,set详解

今天带来map和set的详解，保证大家分清楚一，概念 map和set是一种专门用来搜索的容器或数据结构 map能存储两个数据类型，我们称之为<key-value>模型 set只能存储一个数据类型，我们称之为纯<key>模型它们的效率都非…...

编程日记 2024/10/30 1:15:50

fdisk - Linux下的磁盘分区利器

文章目录前言一、安装和启动二、基本命令2.1 查看分区表2.2 删除分区2.3 创建新分区2.4 更改分区类型2.5 其他指令三、注意事项四、其他相关工具前言在Linux系统中，磁盘管理是维护系统性能和数据安全的重要环节。fdisk 是一个强大的命令行工具，专门…...

编程日记 2024/10/30 1:14:50

or-tools优化库记录

介绍 Or-tools是谷歌人工智能系列的运筹优化包，是一个用于优化的开源软件套件，针对性地解决车辆路线问题、流程优化、整数和线性规划以及约束规划等问题。官网地使用说明比我详细，我就不多逼逼了使用说明网址： https://develo…...

编程日记 2024/10/30 1:13:47

M1 Pro MacBook Pro 上的奇遇：Rust 构建失败，SIGKILL 惊魂记

你是否也曾在 M1 Pro MacBook Pro 上遇到过离奇的编译问题？这次我遇到的奇葩问题绝对值得一聊——一个仅在苹果M1 Pro上的神秘构建失败。其他设备都安然无恙，唯独它！折腾了一番，终于让我揭开了这“阴谋”的真相。问题描述在运…...

编程日记 2024/10/30 1:12:46

重构商业生态：DApp创新玩法与盈利模式的深度剖析

随着区块链技术的发展，DApp（去中心化应用）正在从实验走向成熟。DApp以去中心化、透明性和不可篡改性为基础，结合智能合约，逐步改变传统商业运作模式，创造新的市场生态。本文将从DApp的独特优势、创新玩法和…...

编程日记 2024/10/30 1:09:42

2024首届亚洲国际电影节圆满落下帷幕

10月26日下午，2024首届亚洲国际电影节颁奖典礼在中国•澳门隆重举行。在这座充满时尚感的“东亚文化之都”，一座座金鹮奖杯，汇聚起全球电影艺术的荣耀之光，见证着无数电影梦想的傲然绽放。明星云集欢聚一堂，同庆澳门回…...

编程日记 2024/10/30 1:08:42

【Mybatis】动态SQL+配置文件+数据库连接池+企业规范（10）

本系列共涉及4个框架：Sping,SpringBoot,Spring MVC,Mybatis。博客涉及框架的重要知识点，根据序号学习即可。目录本系列共涉及4个框架：Sping,SpringBoot,Spring MVC,Mybatis。博客涉及框架的重要知识点，根据序号学习即可。 …...

编程日记 2024/10/30 1:07:41

源码：rightmenu.js layui.define([element], function (exports) {let element layui.element;const $ layui.jquery;let MOD_NAME rightmenu;let RIGHTMENUMOD function () {this.v 1.0.0;this.author raowenjing;};String.prototype.format function () {…...

编程日记 2024/10/30 1:06:40

ue5实现数字滚动增长

方法1 https://www.bilibili.com/video/BV1h14y197D1/?spm_id_from333.999.0.0 b站教程重写loop节点方法二写在eventtick里...

编程日记 2024/10/30 1:05:39

Flink（一）

目录架构处理有界与无界数据部署应用到任意地方运行任意规模应用利用内存性能流应用流处理应用的基本组件流状态时间应用场景事件驱动应用事件驱动应用的优势Flink如何支持事件驱动应用？ 典型的事件驱动示例数据分析应用流式分析应用的优势？Flink 如…...

编程日记 2024/10/30 1:04:37

kaggle 数据集下载

文章目录 kaggle 数据集下载（1） 数据集下载（2） 手机号验证 kaggle 数据集下载这两天想学习 kaggle 赛事把深度学习相关的内容自己给过一遍，快忘得差不多了，惭愧。参考了好多帖子，使用命令行…...

编程日记 2024/10/30 1:03:36

Linux shell编程学习笔记87：blkid命令——获取块设备信息

0 引言在进行系统安全检测时，我们需要收集块设备的信息，这些可以通过blkid命令来获取。 1 blkid命令的安装 blkid命令是基于libblkid库的命令行工具，可以在大多数Linux发行版中使用。如果你的Linux系统中没有安装blkid命令，…...

编程日记 2024/10/30 1:00:33

wireshark筛选条件整理

Wireshark筛选条件整理一、MAC地址过滤二、IP地址过滤三、端口过滤四、协议筛选五、数据分析1、整体2、frame数据帧分析3、 Ethernet II 以太网4、IP协议5、TCP6、HTTP7、ARP8、DLEP动态链接交换协议六、统计-协议分级（统计包占比） and && 、 …...

编程日记 2024/10/30 0:59:31

基于现代 C++17 的模块化视频质量诊断处理流程设计

文章目录 0. 引言1. 原始设计分析2. 新的设计思路2.1 定义通用的检测接口2.2 使用 std::function 和 std::any 管理检测模块2.3 构建可动态配置的检测管道 3. 示例实现3.1 定义检测接口和模块3.1.1 检测接口3.1.2 信号检测模块3.1.3 冻结检测模块3.1.4 其他检测模块 3.2 构建检…...

编程日记 2024/10/30 0:57:30

高级java每日一道面试题-2024年10月23日-JVM篇-说一下JVM有哪些垃圾回收算法?

如果有遗漏,评论区告诉我进行补充面试官: 说一下JVM有哪些垃圾回收算法? 我回答: 在 Java 虚拟机 (JVM) 中，垃圾回收 (Garbage Collection, GC) 是一项非常重要的功能，用于自动管理应用程序的内存。JVM 采用多种垃圾回收算法来决定何时以及如何回收…...

编程日记 2024/10/30 0:54:27

高效文本编辑与导航：Vim中的三种基本模式及粘滞位的深度解析

✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。我是Srlua小谢，在这里我会分享我的知识和经验。&am…...

编程日记 2024/10/30 0:50:22

w005基于Springboot学生心理咨询评估系统

🙊作者简介：拥有多年开发工作经验，分享技术代码帮助学生学习，独立完成自己的项目或者毕业设计。代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件，帮助大学选题。赠送开题报告模板&#xff…...

编程日记 2024/10/30 0:49:21

实战-任意文件下载

实战-任意文件下载 1、开局开局一个弱口令，正常来讲我们一般是弱口令或者sql，或者未授权那么这次运气比较好，直接弱口令进去了直接访问看看有没有功能点，正常做测试我们一定要先找功能点发现一个文件上传点，不…...

编程日记 2024/10/30 0:47:19

PG数据库之视图详解

1. 视图的基本定义在PostgreSQL（简称pg）数据库中，视图（View）是一种虚拟表，其内容由SQL查询定义。视图并不实际存储数据，而是在每次查询时根据定义的查询语句动态生成结果。视图可以简化复杂的…...

编程日记 2024/10/30 0:46:18

时间序列预测（十五）——有关Python项目框架的实例分析

#1024程序员节｜征文# 在之前的学习中，已经对时间序列预测的相关内容有了大致的了解。为了进一步加深理解，并能够将所学知识应用于实际中，我决定找一个完整的Python框架来进行深入学习。经过寻找，我终于找到了一篇非常具…...

编程日记 2024/10/30 0:45:16

ETL、ELT和反向ETL都有什么不同？怎么选择？

数据处理是现代企业中不可或缺的一部分。随着数据量的不断增长，如何高效地处理、转换和加载数据变得尤为重要。本文将介绍三种常见的数据处理方式：ETL、ELT和反向ETL，帮助读者更好地理解和选择适合自己业务需求的方式。一、ETL 定义&#…...

编程日记 2024/10/30 0:44:15

linux 中文实用型手册基于RHEL（红帽系）

硬件系统 Updated by wangjing on 2024-10-28 at 02:36:57 in Tongzhou District, Beijing. 硬件信息机器型号 dmidecode | grep "Product Name"CPU型号 cat /proc/cpuinfo |grep "model name" | uniqWWWCPU详情 lscpuCPU个数 cat /proc/cpuinfo |grep &q…...

编程日记 2024/10/30 0:39:10

Hash表算法

哈希表理论知识（本文来自于代码随想录摘抄）什么是哈希常见的三种哈希结数组：set:map:其他常用方法或者技巧（自己总结的） 练习题和讲解有效的字母移位词349. 两个数组的交集1. 两数之和454. 四数相加 II15. 三数之和总…...

编程日记 2024/10/30 0:35:06

MySQL企业常见架构与调优经验分享

文章目录一、选择 PerconaServer、MariaDB 还是 MYSQL二、常用的 MYSQL 调优策略三、MYSOL 常见的应用架构分享四、MYSOL 经典应用架构观看学习课程的笔记，分享于此~ 课程：MySQL企业常见架构与调优经验分享 mysql官方优化文档调优MySQL参数一、选择 …...

编程日记 2024/10/30 0:34:05

免费创办网站/html网页制作app

大小：55.24MB语言：简体分类： 网页辅助版本： 电脑版立即下载查看详情本文将给大家介绍如何使用八爪鱼采集器采集分页列表页面上的信息，并附带给大家讲一下ajax延时设置。目的是让大家了解怎么创建循环翻页并能正常采集…...

编程日记 2025/1/15 17:56:54

遵义在线网站建设/微博营销成功案例8个

这篇文章解决的问题作者认为，之前的工作都将源推文独立的建模， 而没有考虑不同节点之间的影响，所以没有很好的表示出不同节点之间的关系作者如何解决这个问题的作者提出了一个全局-局部的注意力网络（GLAN来检测谣言&#xf…...

编程日记 2025/1/15 17:46:39

建设行业的门户网站/宁波seo服务快速推广

文章目录1、修改请求响应头中的server信息2、修改nginx返回的默认页面中的server信息通过修改nginx源码来修改nginx返回的默认的server信息。 1、修改请求响应头中的server信息修改前的代码和响应头中的server信息： 代码文件路径：nginx-1.21.4\src\htt…...

编程日记 2025/1/15 10:06:45