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

canvas复习笔记（绘制直线、矩形、圆形、圆弧）

news 2025/7/4 13:30:40

canvas 画一条直线

<body><canvasid="c"width="300"height="200"style="border: 1px solid #ccc;"></canvas>
</body><script>// 2、获取 canvas 对象const cnv = document.getElementById("c");// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext("2d");// 4、绘制图形cxt.moveTo(100, 100); // 起点坐标 (x, y)cxt.lineTo(200, 100); // 终点坐标 (x, y)cxt.stroke(); // 将起点和终点连接起来</script>

画两条直线

<script>// 2、获取 canvas 对象const cnv = document.getElementById("c");// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext("2d");// 4、绘制图形cxt.moveTo(100, 100); // 起点坐标 (x, y)cxt.lineTo(200, 100); // 终点坐标 (x, y)cxt.stroke(); // 将起点和终点连接起来cxt.moveTo(80, 60); // 起点坐标 (x, y)cxt.lineTo(180, 60); // 终点坐标 (x, y)cxt.stroke(); // 将起点和终点连接起来
</script>

会发现两条直线的颜色不一致。
线的中心点会和画布像素点的底部对齐，所以会线中间是黑色的，但由于一个像素就不能再切割了，所以会有半个像素被染色，就变成了浅灰色。

设置宽度和线条颜色

<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')// 4、绘制图形cxt.moveTo(100, 100) // 起点坐标 (x, y)cxt.lineTo(200, 100) // 终点坐标 (x, y)cxt.stroke() // 将起点和终点连接起来cxt.moveTo(80, 60) // 起点坐标 (x, y)cxt.lineTo(180, 60) // 终点坐标 (x, y)// 修改直线的宽度cxt.lineWidth = 2// 修改直线的颜色cxt.strokeStyle = 'pink'cxt.stroke() // 将起点和终点连接起来</script>

发现如何设置lineWidth为1， 线条会有部分灰色。

发现上面设置样式，两条直线颜色都是同时修改的，如果需要每条直线设置不同的样式，需要使用新开路径，避免污染

就是在开始另画一条直线时，需要使用beginPath()新开路径

<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')// 4、绘制图形cxt.moveTo(100, 100) // 起点坐标 (x, y)cxt.lineTo(200, 100) // 终点坐标 (x, y)cxt.stroke() // 将起点和终点连接起来cxt.beginPath() // 重新开启一个路径cxt.moveTo(80, 60) // 起点坐标 (x, y)cxt.lineTo(180, 60) // 终点坐标 (x, y)// 修改直线的宽度cxt.lineWidth = 2// 修改直线的颜色cxt.strokeStyle = 'pink'cxt.stroke() // 将起点和终点连接起来</script>

就会发现第一条直线时默认的颜色，第二条样式有更改。

画折线

画折线，可以多使用几个lineTo实现

<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')// 4、绘制图形cxt.moveTo(100, 100) // 起点坐标 (x, y)cxt.lineTo(200, 100) // 终点坐标 (x, y)cxt.stroke() // 将起点和终点连接起来cxt.beginPath() // 重新开启一个路径cxt.moveTo(80, 60) // 起点坐标 (x, y)cxt.lineTo(180, 60) // 终点坐标 (x, y)cxt.lineTo(180, 10) // 终点坐标 (x, y)// 修改直线的宽度cxt.lineWidth = 2// 修改直线的颜色cxt.strokeStyle = 'pink'cxt.stroke() // 将起点和终点连接起来</script>

绘制矩形

使用strokeRect 和fillRect画矩形


<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.strokeStyle = 'blue'cxt.strokeRect(40, 40, 140, 80);//(x,y,width, height)cxt.strokeStyle = 'pink'cxt.strokeRect(80, 80, 140, 80);//(x,y,width, height)cxt.fillStyle = 'orange'cxt.fillRect(10, 10, 50, 100)</script>

可以看出，后面fillRect会遮挡之前画出的矩形

使用rect画矩形，需要调用stroke或者fill来完成。

clearRect用于清除矩形

请空画布

cxt.clearRect(0, 0, cnv.width, cnv.height)

当画多边形，使用使用closePath()来闭合，否则拐角就出现“不正常”现象。

<body><canvas id="c" width="300" height="500" style="border: 1px solid #ccc;"></canvas>
</body><script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.moveTo(50, 50)cxt.lineTo(200, 50)cxt.lineTo(200, 200)// 手动闭合cxt.closePath()cxt.lineJoin = 'miter' // 线条连接的样式。miter: 默认; bevel: 斜面; round: 圆角cxt.lineWidth = 20cxt.stroke()</script>

拐角样式 lineJoin
属性值包括：

miter: 默认值，尖角
round: 圆角
bevel: 斜角

线帽 lineCap
属性值包括：

butt: 默认值，无线帽
square: 方形线帽
round: 圆形线帽

虚线 setLineDash()
虚线分3种情况.需要传入一个数组，且元素是数值型。
只传1个值
有2个值
有3个以上的值

arc()画圆

开始角度和结束角度，都是以弧度为单位。例如 180°就写成 Math.PI ，360°写成 Math.PI * 2
counterclockwise，true为顺时针方向， false为逆时针方向，默认为false

arc(x, y, r, sAngle, eAngle，counterclockwise)

在这里插入图片描述

在实际开发中，为了让自己或者别的开发者更容易看懂弧度的数值，1°应该写成 Math.PI / 180。

100°: 100 * Math.PI / 180
110°: 110 * Math.PI / 180
241°: 241 * Math.PI / 180

注意：绘制圆形之前，必须先调用 beginPath() 方法！！！ 在绘制完成之后，还需要调用 closePath() 方法！！！

一个完整的圆

<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 100, 0, 360 * Math.PI / 180) // 顺时针cxt.closePath()cxt.stroke()</script>

半圆

<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180) // 顺时针cxt.closePath()cxt.stroke()</script>

arc画圆弧

如果想画弧线，调用arc函数，最后不调用closePath()

画出一条在上的弧线


<script>// 2、获取 canvas 对象const cnv = document.getElementById('c')// 3、获取 canvas 上下文环境对象const cxt = cnv.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180, true) // 顺时针cxt.stroke()</script>

比较常用的一个功能，用canvas绘制带有圆角的图片

  function drawRoundedRect(ctx, x, y, width, height, radius) {ctx.moveTo(x + radius, y)ctx.lineTo(x + width - radius, y)ctx.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI)ctx.lineTo(x + width, y + height - radius)ctx.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI)ctx.lineTo(x + radius, y + height)ctx.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, 1 * Math.PI)ctx.lineTo(x, y + radius)ctx.arc(x + radius, y + radius, radius, 1 * Math.PI, 1.5 * Math.PI)}

arcTo() 画弧线

语法

arcTo(cx, cy, x2, y2, radius)
//切断横坐标，切点纵坐标， 结束点横坐标， 结束点纵坐标， radius半径

ctx.moveTo(20,20); // 创建开始点 
ctx.lineTo(100,20); // 创建水平线 
ctx.arcTo(150,20,150,70,50); // 创建弧 
ctx.lineTo(150,120); // 创建垂直线

在这里插入图片描述

平方贝塞尔曲线

ctx.moveTo(100,100);
ctx.quadraticCurveTo(200,125,100,150);

在这里插入图片描述

三次方贝塞尔曲线

ctx.moveTo(150,0);
ctx.bezierCurveTo(0,125,300,175,150,300);

在这里插入图片描述

描边 strokeText()

strokeText(text, x, y, maxWidth)
  • text: 字符串，要绘制的内容
  • x: 横坐标，文本左边要对齐的坐标（默认左对齐）
  • y: 纵坐标，文本底边要对齐的坐标
  • maxWidth: 可选参数，表示文本渲染的最大宽度（px），如果文本超出 maxWidth 设置的值，文本会被压缩。

填充文本 fillText

fillText(text, x, y, maxWidth)

设置填充颜色

 fillStyle()

获取文本长度 measureText()

measureText().width 方法可以获取文本的长度，单位是 px 。

cxt.measureText(text).width

注：本文图片及代码部分都来源于网络。

相关文章：

canvas复习笔记（绘制直线、矩形、圆形、圆弧）

canvas 画一条直线 <body><canvasid"c"width"300"height"200"style"border: 1px solid #ccc;"></canvas> </body><script>// 2、获取 canvas 对象const cnv document.getElementById("c");…...

编程日记 2023/3/1 15:50:47

LeetCode 653. 两数之和 IV - 输入二叉搜索树

653. 两数之和 IV - 输入二叉搜索树 难度&#xff1a;easy\color{Green}{easy}easy 题目描述 给定一个二叉搜索树 rootrootroot 和一个目标结果 kkk&#xff0c;如果二叉搜索树中存在两个元素且它们的和等于给定的目标结果&#xff0c;则返回 truetruetrue。 示例 1&#xf…...

编程日记 2023/3/1 15:49:38

【Datawhale图机器学习】图神经网络

图神经网络 GNN是一种连接模型&#xff0c;通过网络中节点之间的信息传递的方式来获取图中的依存关系&#xff0c;GNN通过从节点任意深度的邻居来更新该节点状态&#xff0c;这个状态能够表示状态信息。第一次在论文 The graph neural network model 中提出 与传统NN的区别&a…...

编程日记 2023/3/1 15:48:32

【项目精选】 javaEE采购管理系统（论文+视频+源码）

点击下载源码 本系统是一个独立的系统&#xff0c;用来解决企业采购信息的管理问题。采用JSP技术构建了一个 有效而且实用的企业采购信息管理平台&#xff0c;目的是为高效地完成对企业采购信息的管理。经过 对课题的深入分析&#xff0c;采购系统需实现以下功能模块&#xff1…...

编程日记 2023/3/1 15:47:26

【Servlet篇2】创建一个web项目

在上一篇文章当中&#xff0c;已经提到了什么是Maven&#xff0c;以及如何使用maven从中央仓库下载jar包。【Tomcat与Servlet篇1】认识Tomcat与Maven_革凡成圣211的博客-CSDN博客Tomcat&#xff0c;mavenhttps://blog.csdn.net/weixin_56738054/article/details/129228140?spm…...

编程日记 2023/3/1 15:46:16

Allegro如何手动让静态铜皮避让过孔操作指导

Allegro如何手动让静态铜皮避让过孔操作指导 在用Allegro做PCB设计的时候，如果铺的是静态铜皮，铜皮铺在过孔上会造成短路，需要手动避让下，如下图 下面介绍如何手动避让，具体操作如下 点击Shape点击Manual Void/Cavity...

编程日记 2023/3/1 15:45:11

Java使用SpringBoot的Filter来扩展管道请求

Java Spring Boot 是一个流行的 Java Web 开发框架&#xff0c;它提供了一些基本的 Web 管道功能。在 Spring Boot 中&#xff0c;Web 管道是通过一组过滤器、拦截器、控制器和视图解析器等组件组成的。 如果你需要扩展 Spring Boot Web 管道&#xff0c;可以考虑以下几种方式…...

编程日记 2023/3/1 15:44:05

「JVM 高效并发」锁优化

为了线程间更高效的共享数据及解决竞争问题&#xff0c;提高程序执行效率&#xff0c;JDK 6 做了大量锁优化&#xff0c;如适应性自旋&#xff08;Adaptive Spinning&#xff09;、锁消除&#xff08;Lock Elimination&#xff09;、锁膨胀&#xff08;Lock Coarsening&#xf…...

编程日记 2023/3/1 15:42:59

当园区物流遇上云计算，会发生什么事情？

顺丰供应链与亚马逊云科技的强强联手&#xff0c;可以给物流供应链企业带来怎样的启示&#xff1f;物流行业的数智化趋势在国内物流行业说起顺丰&#xff0c;相信是无人不知无人不晓。作为数字化供应链服务解决方案提供商&#xff0c;顺丰供应链可以提供端到端供应链的规划、管…...

编程日记 2023/3/1 15:40:50

作为测试开发岗的面试官，我都是怎么选人的？

最近一段时间面试了不少人&#xff0c;主要是一些测试开发岗&#xff0c;中高级的初级的也都有&#xff1b;也有一些偏业务测试岗的候选人。总结出了一些方法论&#xff0c;或者说更多的是个人作为面试官所遵守的一套面试准则。 1.什么是面试&#xff1f; 面试不仅仅是你问我…...

编程日记 2023/3/1 15:39:41

android事件分发机制源码分析

没什么用的前言责任链设计模式流程图源码分析 没什么用的前言 事件分发机制是面试中一道必问的题目&#xff0c;而我的应对方式则是&#xff0c;在网络上找一些博客看看&#xff0c;然后做一些笔记&#xff0c;最后在面试时将我自己记住的内容说出来。这种方式本身没有太大的…...

编程日记 2023/3/1 15:37:32

今天，小灰37岁了！

人们常常说&#xff0c;35岁是互联网人的中年危机。现在&#xff0c;小灰已经跨过了中年危机&#xff0c;倒不是因为小灰财务自由了&#xff0c;而是因为今天是小灰37岁的生日。年轻时候&#xff0c;小灰总觉得30岁是一个很遥远的年龄&#xff0c;而现在&#xff0c;小灰距离40…...

编程日记 2023/3/1 15:36:24

基于.NET 7 + iView 的前后端分离的通用后台管理系统开源框架

更多开源项目请查看&#xff1a;一个专注推荐.Net开源项目的榜单 今天给大家推荐一套前后端分离通用后台管理系统开源框架。 项目简介 这是基于.Net 7 Vue.js开发的、前后端分离框架&#xff0c;前端UI框架采用iView&#xff0c;该项目只有基础功能模块&#xff0c;不包含具…...

编程日记 2023/3/1 15:35:19

新一代通信协议—— RSocket

一、简介 RSocket 是一种二进制字节流传输协议&#xff0c;位于 OSI 模型中的5~6层&#xff0c;底层可以依赖 TCP、WebSocket、Aeron 协议。最初由 Netflix 开发&#xff0c;支持 Reactive Streams。其开发背后的动机是用开销更少的协议取代超文本传输协议(HTTP)&#xff0c;H…...

编程日记 2023/3/1 15:34:11

【编程实践】这个代码命名规范是真优雅呀！代码如诗！！（多读优秀的开源代码，多实践，你也可以一样优秀！）

目录 管理类命名 传播类命名 回调类命名 监控类命名 内存管理类命名 过滤检测类命名 结构类命名 常见设计模式命名 解析类命名 网络类命名 CRUD命名 其他 End 管理类命名 写代码&#xff0c;少不了对统一资源的管理&#xff0c;清晰的启动过程可以有效的组织代码…...

编程日记 2023/3/1 15:33:05

Linux-＞进程终止和等待

目录 1. 进程终止场景 1.1 进程退出码 1.2 进程常见退出方式 2. 进程等待 2.1 进程等待的必要性 2.2 进程等待的方式 wait()方式 waitpid()方式 options参数 status参数 1. 进程终止场景 代码运行完毕&#xff0c;结果正确 代码运行完毕&#xff0c;结果不正确 代码异…...

编程日记 2023/3/1 15:31:59

超店有数分享：tiktok数据分析工具推荐，助你成功出海！

现阶段的跨境电商人都纷纷入局tiktok&#xff0c;这是风口也是发展趋势。Tiktok的下载量已经超过了35亿&#xff0c;每月都有10亿用户活跃&#xff0c;在154国家/地区使用。Tiktok用户每天在平均花1小时左右进行浏览&#xff0c;打开率也很高。如今&#xff0c;tiktok也越来越成…...

编程日记 2023/3/1 15:30:53

2022 第十四届蓝桥杯模拟赛第三期（题解与标程）

第十四届蓝桥杯模拟赛第三期1. 最小的十六进制问题描述答案提交参考答案2. Excel的列问题描述答案提交参考答案3. 相等日期问题描述答案提交参考答案4. 多少种取法问题描述答案提交参考答案5. 最大连通分块问题描述答案提交参考答案6. 哪一天问题描述输入格式输出格式样例输入样…...

编程日记 2023/3/1 15:29:39

「TCG 规范解读」PC 平台相关规范（1）

可信计算组织&#xff08;Ttrusted Computing Group,TCG&#xff09;是一个非盈利的工业标准组织&#xff0c;它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立&#xff0c;并采纳了由可信计算平台联盟&#xff08;the Trusted Computing Platform Alli…...

编程日记 2023/3/1 15:28:31

HNU工训中心：直流电路测量分析实验报告

工训中心的牛马实验 实验目的 1.熟悉直流电路的测量和分析方法。 2.熟悉直流电源、电压表、电流表的使用法及其特性。 实验仪器和器材 1.实验仪器 直流稳压电源型号:IT6302 台式多用表型号:UT805A 2.实验&#xff08;箱&#xff09;器材 电路实验箱 元器件&#xff1a;电阻…...

编程日记 2023/3/1 15:27:25

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/7/2 11:19:19

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/6/28 14:27:05

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/7/1 15:43:18

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/6/16 20:36:05

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/4 13:30:34

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/6/17 2:19:51

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/7/3 22:55:35

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/7/4 9:22:09

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/6/25 2:33:20