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

Canvas入门-01

news 文章来源：https://blog.csdn.net/qq_36154157/article/details/129224534 2024/11/18 2:55:42

导读：
读完全文需要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

Intel CSME 简述

SME 算是 Intel X86 PC 上最神秘的部分了，本文根据 us-19-Hasarfaty-Behind-The-Scenes-Of-Intel-Security-And-Manageability-Engine 一文写成。讲述内容无法证伪，各位随便听听即可，了解这些能够帮助BIOS 工程师更好的理解一些操作的实现。文章基于 Intel 第八代第九代CPU（…...

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

复位理论基础

先收集资料&#xff0c;了解当前常用的基础理论和实现方式 复位 初始化微控制器内部电路 将所有寄存器恢复成默认值确认MCU的工作模式禁止全局中断关闭外设将IO设置为高阻输入状态等待时钟趋于稳定从固定地址取得复位向量并开始执行 造成复位的原因 有多种引起复位的因素&…...

编程日记 2023/3/2 2:50:36

Python基础知识——列表

列表 列表是可以存放任何数据&#xff0c;包括整型&#xff0c;浮点型&#xff0c;字符串&#xff0c;布尔型等等&#xff0c;是常用的数据类型之一。 1.列表的创建 列表也是一个可迭代对象 1. 普通形式l [1,2,3,4,5] ---整型列表l ["a","b","c&…...

编程日记 2023/3/2 2:49:29

如何使用工时表管理项目和非项目的资源？

对新机会做出反应的能力是企业竞争优势的关键。项目不断涌现&#xff0c;企业需要了解具体的可用性以及是否有资源来接受新事物。更进一步来说&#xff0c;企业需要知道员工将时间花在哪里。 使用 8Manage工时表解决方案&#xff0c;你将始终拥有做出正确业务决策所需的全面知…...

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

项目经理如何做好质量保证与标准维持？非技术项目经理如何做好质量管控？

项目经理如何做好质量保证与标准维持&#xff1f;非技术项目经理如何做好质量管控&#xff1f;01.质量保障需要重视哪些执行层面的细节02.非技术出身项目经理如何做好质量保障工作03.质量管理除了PDCA&#xff0c;还有哪些推荐的方法04.质量保证与标准维持&#xff0c;作为常态…...

编程日记 2023/3/2 2:47:15

[文件操作] File 类的用法和 InputStream, OutputStream 的用法

能吃是不是件幸福的事呢 文章目录前言1. 文件的相关定义2. 文件类型3. Java对文件系统的操作3.1 对文件的基础操作3.2 读文件3.3 写文件前言 从这章开始,我们就开始学文件操作相关的知识了~ 1. 文件的相关定义 1.文件的定义可以从狭义和广义两个方面解释. 狭义: 指硬盘上的文…...

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

索莫菲模型的一些理解 Smomerfeld Model

如何解释传统热容算出来的数值与量子模型下的区别&#xff1f; 因为只有费米能附近的电子才能够进行移动&#xff0c;这个是问题的差别所在 我们下面就来介绍如何求费米能&#xff08;费米能的计算&#xff09; 既然费米能附近的电子很重要&#xff0c;那么附近的电子有多少很…...

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

SAP ERP系统MM模块常用增强之四：采购申请输入字段的校验检查

在SAP/ERP项目的实施中采购管理模块&#xff08;MM&#xff09;的创建和修改采购申请一般都会有输入字段校验检查的需求&#xff0c;来防止业务人员录入错误或少录入数据&#xff0c;这方面需求部分是可以通过配置实现&#xff0c;比如一些字段是否必输&#xff0c;是否显示等&…...

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

STM32C0介绍(1)----概述

概述 STM32C0系列微控制器是意法半导体公司推出的一款低功耗、高性能的微控制器产品。它们被设计用于需要小型、低功耗和高度可集成的应用程序&#xff0c;如传感器、消费品、电池供电设备、家庭自动化和安全等应用。该系列的微控制器采用ARM Cortex-M0内核&#xff0c;具有丰…...

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

windows无盘启动技术开发之传统BIOS(Legacy BIOS)引导程序开发之一

by fanxiushu 2023-03-01 转载或引用请注明原始作者。这个话题可能有点老&#xff0c;UEFI BIOS 已经大量存在&#xff0c;而Legacy BIOS最终会被取代。但是也是作为无盘启动技术里不可或缺的&#xff0c;毕竟还有许多老型号的电脑存在&#xff0c;而且为了兼容性&#xff0c;有…...

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

wordpress怎么做两个语言网站/新闻今日头条最新消息

Velocity是一种Java模版引擎技术&#xff0c;该项目由Apache提出&#xff0c;由另外一种引擎技术Webmacro引深而来。那什么是官方的Velocity定义呢&#xff1f;Apache对它的定义是&#xff1a;一种基于Java的模板引擎&#xff0c;但允许任何人使用简单而强大的模板语言来引用定…...

编程日记 2024/11/18 0:12:07

网站建设的优势是什么/网站收录服务

公众号关注 「奇妙的 Linux 世界」设为「星标」&#xff0c;每天带你玩转 Linux &#xff01;根据美国科技媒体 Platformer 的报道&#xff0c;美东时间本周一&#xff08;2月13日&#xff09;凌晨02点36分&#xff0c;推特 CEO 马斯克的堂弟詹姆斯马斯克在推特工程师的 Slack …...

编程日记 2024/11/17 20:12:46

自己给公司做网站/上海专业排名优化公司

在日常工作中&#xff0c;批量管理服务器是个力气活&#xff0c;如果人工一台一台处理&#xff0c;效率低下。此时&#xff0c;老外写的pssh工具实现了批量管理。http://www.theether.org/pssh/ 它的原理是先建立ssh私钥认证&#xff0c;然后用pssh工具批量管理。 下面&#xf…...

编程日记 2024/11/17 17:45:49

wordpress 4.8 下载/网站seo设计方案案例

n<500的树上有点权&#xff08;有正负&#xff09;&#xff0c;选若干个点使点权和>X(<1e6)并且相邻点的对数最多&#xff0c;输出相邻点最多多少对。 在n个点里选某权和的最多相邻点->在n个点里选某数量的相邻点使权和最大 f(i,j,0/1)--子树i中选j对相邻关系&…...

编程日记 2024/11/17 14:52:28

深圳有多少网站建设公司/营销策略的概念

操作界面这个小系统一共包含4个脚本sh功能备注oneKey.sh主程序&#xff0c;调用其他程序&#xff0c;对外提供功能menu.sh勾画菜单function.sh提供操作数据库接口valid.sh操作mysql数据库&#xff0c;验证数据menu.sh画字符菜单#!/bin/bashfunction print_main_menu(){cat <…...

编程日记 2024/11/17 14:27:12

建设电商网站/培训机构不退费最有效方式

linux shell命令下我们可以通过相关命令关闭和重启计算机&#xff0c;下面由学习啦小编为大家搜集整理了linux shell的关机命令是什么的相关知识&#xff0c;希望对大家有帮助!linux shell的关机命令问题描述对于Linux系统而言&#xff0c;许多时候是用于服务器之类的&#xff…...

编程日记 2024/11/17 14:12:05