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

Canvas入门-01

news 2025/9/13 12:28:03

导读：
读完全文需要2min。通过这篇文章，你可以了解到以下内容：

  • Canvas标签基本属性
  • 如何使用Canvas画矩形、圆形、线条、曲线、笑脸😊

如果你曾经了解过Canvas，可以对照目录回忆一下能否回答上来
毕竟带着问题学习最有效果👍

文章目录

    • 1 canvas画布有默认大小吗？
    • 2 canvas标签内的内容是什么
    • 3 canvas画布横纵坐标轴方向
    • 4 canvas如何画矩形
    • 5 canvas如何画路径
      • 5.1 画直线
      • 5.2 画圆弧
      • 5.3 画二次、三次曲线

1 canvas画布有默认大小吗？

默认宽高是300*150，如果其中内容超过了，会被隐藏，不会自动撑开。
可以手动修改宽高

<canvas id="canvas" height="1000" width="500"></canvas>

2 canvas标签内的内容是什么

canvas标签内的内容相当于alt，只在不支持canvas的浏览器中展示
注意：区分「标签子元素的内容」和「画布中的内容」，两码事

 <!-- alt文字 --><canvas>一些文字，在不支持canvas标签的浏览器中会展示</canvas><!-- alt图片 --><!-- canvas标签内的内容相当于alt，只在不支持canvas的浏览器中展示 --><canvas><img src="https://gw.alicdn.com/imgextra/i3/O1CN01rVgCA81YzaUtfQxiP_!!6000000003130-2-tps-32-32.png"/></canvas>

3 canvas画布横纵坐标轴方向

画布
在这里插入图片描述

4 canvas如何画矩形

  • 画实心矩形
    ctx.fillRect(x, y, w, h)

  • 画一个矩形的边框
    ctx.strokeRect(x, y, w, h)

  • 清除指定矩形区域，让清除部分完全透明
    ctx.strokeRect(x, y, w, h)

  • 指定颜色
    ctx.fillStyle = ‘rgba(0,0,1,0.5)’

在这里插入图片描述

  <body><div>canvas hello world</div><canvas id="canvas" width="300" height="300"></canvas><script>const canvas = document.getElementById('canvas')if (canvas.getContext) {const ctx = canvas.getContext('2d')// draw herectx.fillStyle = 'red'ctx.fillRect(10, 10, 150, 150)ctx.fillStyle = 'rgba(0,0,1,0.5)'ctx.fillRect(50, 50, 150, 150)ctx.clearRect(70, 70, 80, 80)ctx.strokeRect(80, 80, 60, 60);}</script></body>

三个函数绘制之后会马上显现在 canvas 上，即时生效

5 canvas如何画路径

画路径

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.closePath();// 填充， 不闭合会自动闭合（连接起点和终点
ctx.fill();// 绘制边框（不会自动闭合
ctx.stroke();

⚠️不执行fill或者stroke不会显示在画布上

5.1 画直线

绘制直线
ctx.lineTo(x, y)

在这里插入图片描述

<body><div>canvas hello world</div><canvas id="canvas" width="300" height="300"></canvas><script>const canvas = document.getElementById('canvas')if (canvas.getContext) {const ctx = canvas.getContext('2d')// draw herectx.beginPath()ctx.moveTo(10, 10)ctx.lineTo(20, 20)ctx.lineTo(10, 30)// 使用fill方法，可以自动闭合ctx.fill()// 使用stroke绘制边框，不会自动闭合，需要手动闭合closePathctx.closePath()ctx.stroke()}</script></body>

5.2 画圆弧

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

  • 圆心的xy坐标 半径
  • 起点角度 终点角度 是否逆时针

画一个😊

在这里插入图片描述

    <script>const canvas = document.getElementById('canvas')if (canvas.getContext) {const ctx = canvas.getContext('2d')ctx.beginPath();// 画圆ctx.arc(100, 100, 70, 0, Math.PI * 2, true)// 画嘴巴ctx.moveTo(150, 100)ctx.arc(100, 100, 50, 0, Math.PI, false)// 左眼睛ctx.moveTo(82, 75)ctx.arc(76, 75, 6, 0, Math.PI * 2)// 右眼睛ctx.moveTo(130, 75)ctx.arc(124, 75, 6, 0, Math.PI * 2)// 绘制图形ctx.stroke()}</script>

5.3 画二次、三次曲线

  • 二次曲线
    ctx.quadraticCurveTo(cp1x, cp1y, x, y)
    封装的一个用于绘制圆角矩形的函数
// 封装的一个用于绘制圆角矩形的函数。function roundedRect(ctx, x, y, width, height, radius){ctx.beginPath();ctx.moveTo(x, y + radius);ctx.lineTo(x, y + height - radius);ctx.quadraticCurveTo(x, y + height, x + radius, y + height);ctx.lineTo(x + width - radius, y + height);ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);ctx.lineTo(x + width, y + radius);ctx.quadraticCurveTo(x + width, y, x + width - radius, y);ctx.lineTo(x + radius, y);ctx.quadraticCurveTo(x, y, x, y + radius);ctx.stroke();
}
  • 三次曲线
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

相关文章：

Canvas入门-01

导读&#xff1a; 读完全文需要2min。通过这篇文章&#xff0c;你可以了解到以下内容&#xff1a; Canvas标签基本属性如何使用Canvas画矩形、圆形、线条、曲线、笑脸&#x1f60a; 如果你曾经了解过Canvas&#xff0c;可以对照目录回忆一下能否回答上来 毕竟带着问题学习最有效…...

编程日记 2023/3/2 3:14:09

运算符优先级

醋坛酸味罐&#xff0c;位落跳福豆 醋&#xff1a;初等运算符&#xff1a; () [] -> . 坛&#xff1a;单目运算符&#xff1a; - ~ – * & ! sizeof 右结合 酸&#xff1a;算术运算符&#xff1a; - * / % 味&#xff1a;位移运算符&#xff1a;>> << …...

编程日记 2023/3/2 3:13:04

微信小程序使用scss编译wxss文件的配置步骤

文章目录1、在 vscode 中搜索 easysass 插件并安装2、在微信开发工具中导入安装的easysass插件3、修改 spook.easysass-0.0.6/package.json 文件中的配置4、重启开发者工具&#xff0c;就可用使用了微信小程序开发者工具集成了 vscode 编辑器&#xff0c;可以使用 vscode 中众多…...

编程日记 2023/3/2 3:11:59

一步一步教你如何使用 Visual Studio Code 编译一段 C# 代码

以下是一步一步教你如何使用 Visual Studio Code 编写使用 C# 语言输出当前日期和时间的代码&#xff1a; 1、下载并安装 .NET SDK。您可以从 Microsoft 官网下载并安装它。 2、打开 Visual Studio Code&#xff0c;并安装 C# 扩展。您可以在 Visual Studio Code 中通过扩展菜…...

编程日记 2023/3/2 3:10:51

vue-cli中的环境变量注意点

在客户端侧代码中使用环境变量只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们&#xff1a;console.log(process.env.VUE_APP_SECRET)在构建过程中&#xff0c;process.env.VUE_APP_SECRET 将会被相应的值所…...

编程日记 2023/3/2 3:09:42

2.3数据类型

文章目录1. 命名规则2.字符3.数字4.日期5.图片1. 命名规则 字段名必须以字母开头&#xff0c;尽量不要使用拼音长度不能超过30个字符&#xff08;不同数据库&#xff0c;不同版本会有不同&#xff09;不能使用SQL的保留字&#xff0c;如where,order,group只能使用如下字符a-z、…...

编程日记 2023/3/2 3:08:33

Kafka基本概念

什么是Kafka Kafka是一个消息系统。它可以集中收集生产者的消息&#xff0c;并由消费者按需获取。在Kafka中&#xff0c;也将消息称为日志(log)。 一个系统&#xff0c;若仅有一类或者少量的消息&#xff0c;可直接进行发送和接收。 随着业务量日益复杂&#xff0c;消息的种类…...

编程日记 2023/3/2 3:07:28

使用QueryBuilders、NativeSearchQuery实现复杂查询

使用QueryBuilders、NativeSearchQuery实现复杂查询 本文继续前面文章《ElasticSearch系列&#xff08;二&#xff09;springboot中集成使用ElasticSearch的Demo》&#xff0c;在前文中&#xff0c;我们介绍了使用springdata做一些简单查询&#xff0c;但是要实现一些高级的组…...

编程日记 2023/3/2 3:06:21

taobao.open.account.update( Open Account数据更新 )

&#xffe5;开放平台免费API不需用户授权 Open Account数据更新 公共参数 请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 公共响应参数: 响应参数 点击获取key和secret 请求示例 TaobaoClient client new DefaultTaobaoClient(url, appkey, sec…...

编程日记 2023/3/2 3:05:11

PT100铂电阻温度传感器

PT100温度传感器又叫做铂热电阻。 　 　 热电阻是中低温区&#xfe61;常用的一种温度检测器。它的主要特点是测量精度高&#xff0c;性能稳定。其中铂热电阻的测量精确度是&#xfe61;高的&#xff0c;它不仅广泛应用于工业测温&#xff0c;而且被制成标准的基准仪。金属热…...

编程日记 2023/3/2 3:04:03

蓝桥杯-本质上升序列

没有白走的路&#xff0c;每一步都算数&#x1f388;&#x1f388;&#x1f388; 题目描述&#xff1a; 小蓝特别喜欢单调递增的事物 在一个字符串中如果取出若干个字符&#xff0c;按照在原来字符串中的顺序排列在一起&#xff0c;组成的新的字符串如果是单调递增的&#xf…...

编程日记 2023/3/2 3:02:53

synchronized锁重入验证

文章目录synchronized锁重入验证1. 可重入锁2. synchronized锁重入2.1 本类同步方法内部调用本类其它同步方法2.2 子类同步方法内部调用父类的同步方法2.3 A类的同步方法内部调用B类的同步方法3. synchronized修饰方法写法synchronized锁重入验证 1. 可重入锁 可重入锁&#…...

编程日记 2023/3/2 3:01:46

超简单的计数排序！！

假设给定混乱数据为&#xff1a;3&#xff0c;0&#xff0c;1&#xff0c;3&#xff0c;6&#xff0c;5&#xff0c;4&#xff0c;2&#xff0c;1&#xff0c;9。 下面我们将通过使用计数排序的思想来完成对上面数据的排序。(先不谈负数) 计数排序 该排序的思路和它的名字一样…...

编程日记 2023/3/2 3:00:41

发现新大陆——原来软件开发根本不需要会编码（看我10分钟应用上线）

目录 一、前言 二、官网基础功能及搭建 三、体验过程 01、连接数据源 02、设计表单 03、流程设计 04、图表呈现 05、组织架构设置 五、效率评价 六、小结 一、前言 众所周知&#xff0c;每家公司在发展过程中都需要构建大量的内部系统&#xff0c; 如运营使用的用户…...

编程日记 2023/3/2 2:59:32

【Leedcode】栈和队列必备的面试题（第二期）

【Leedcode】栈和队列必备的面试题&#xff08;第二期&#xff09; 文章目录【Leedcode】栈和队列必备的面试题&#xff08;第二期&#xff09;一、题目&#xff08;用两个队列实现栈&#xff09;二、思路图解1.定义两个队列2.初始化两个队列3.往两个队列中放入数据4.两个队列出…...

编程日记 2023/3/2 2:58:27

Elasticsearch实战之（商品搜索API实现）

Elasticsearch实战之&#xff08;商品搜索API实现&#xff09; 1、案例介绍 某医药电商H5商城基于Elasticsearch实现商品搜索 2、案例分析 2.1、数据来源 商品库 - 平台运营维护商品库 - 供应商维护 2.2、数据同步 2.2.1、同步双写 写入 MySQL&#xff0c;直接也同步往…...

编程日记 2023/3/2 2:57:22

剑指 Offer 14-剪绳子

摘要 ​​​​​​剑指 Offer 14- I. 剪绳子 剑指 Offer 14- II. 剪绳子 II 343. 整数拆分 一、动态规划解析 这道题给定一个大于1的正整数n&#xff0c;要求将n 拆分成至少两个正整数的和&#xff0c;并使这些正整数的乘积最大化&#xff0c;返回最大乘积。令x是拆分出的第…...

编程日记 2023/3/2 2:56:16

泰克示波器|MSO64示波器的应用

泰克新一代示波器MSO64为实例来讲解时频域信号分析技术。MSO64采用全新TEK049平台&#xff0c;不仅实现了4通道同时打开时25GS/s的高采样率&#xff0c;而且实现了12-bit高垂直分辨率。同时&#xff0c;由于采用了新型低噪声前端放大ASIC—TEK061&#xff0c;大大降低了噪声水平…...

编程日记 2023/3/2 2:55:09

1.4 黑群晖安装：SataPortMap和DiskIdxMap两种获取方式

tinycore及安装工具下载&#xff1a;工具&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1CMLl6waOuW-Ys2gKZx7Jgg?pwdchct提取码&#xff1a;chcttinycore&#xff1a;链接&#xff1a;https://pan.baidu.com/s/19lchzLj-WDXPQu2cEcskBg?pwddcw2 提取码&#xff1a;d…...

编程日记 2023/3/2 2:54:00

JVM虚拟机概述（2）

3.JVM 运行时数据区 3.1.1 程序计数器&#xff08;Program Counter Register&#xff09; 是一块很小的内存空间,用来记录每个线程运行的指令位置&#xff0c;是线程私有的,每个线程都拥有一个程序计数器&#xff0c;生命周期与线程一致&#xff0c;是运行时数据区中唯一一个不…...

编程日记 2023/3/2 2:52:53

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/9/9 14:51:22

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/9/13 9:54:25

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/9/10 3:54:15

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/9/3 19:32:54

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/8/26 13:01:14

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/9/11 17:53:57

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/7/8 17:49:38