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

canvas 学习指南

canvas 学习指南

创建一个 canvas

<! DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta charset="utf-8" /><script type="text/javascript">window.onload = function() {//1、获取canvas对象var cnv = document.getElementById("canvas");//2、获取上下文环境对象contextvar cxt = cnv.getContext("2d");//3、开始绘制图形cxt.moveTo(50, 100);cxt.lineTo(150, 50);cxt.stroke();              }</script></head><body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray; "></canvas> </body></html>
定义宽高

如果在 CSS 样式中定义,我们使用 canvas 对象获取的宽度和高度是默认值,而不是实际的宽度和高度。这样就无法获取 canvas 对象正确的宽度和高度。获取 canvas 对象实际的宽度和高度是 Canvas 开发中最常用的操作,因此对于 Canvas 的宽度和高度我们就一定要在 HTML 属性中定义,而不是在 CSS 属性中定义。

我们可以使用 cnv.width 和 cnv.height 分别获取 Canvas 的宽度和高度,可以使用 cnv.getContext(“2d”)来获取 canvas 2D 上下文环境对象,也可以使用 toDataURL()来获取 canvas 对象产生的位图的字符串。在这里,cnv 是指 canvas 对象。

直线图形

  • 多边形

    可以将 moveTo()和 lineTo()配合使用来画三角形和矩形。其实在 Canvas 中,多边形也是使用 moveTo()和 lineTo()这两个方法画出来的。如果我们想要在 Canvas 中画多边形,则需要事先在草稿纸或软件中计算出多边形中各个顶点的坐标,然后再使用 moveTo()和 lineTo()在 Canvas 中画出来。跟矩形不一样,Canvas 没有专门用来绘制三角形和多边形的方法。对于三角形以及多边形,我们也是使用 moveTo()和 lineTo()这两个方法来实现。

  • 一条直线
    cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.stroke();
    (x1, y1)表示直线“起点”的坐标。moveTo 的含义是“将画笔移到该点(x1, y1)位置上,然后开始绘图”。(x2, y2)表示直线“终点”的坐标。lineTo 的含义是“将画笔从起点(x1, y1)开始画直线,一直画到终点坐标(x2, y2)”。
    上面两句代码仅仅是确定直线的“起点坐标”和“终点坐标”这两个状态,但是实际上画笔还没开始“动”。因此我们还需要调用上下文对象的 stroke()方法才有效。使用 Canvas 画直线,与我们平常用笔在纸张上画直线是一样的道理,都是先确定直线起点(x1, y1)与终点(x2, y2),然后再用笔连线(stroke())。

  • 矩形
    对于绘制矩形,Canvas 还为我们提供了独立的方法来实现。在 Canvas 中,矩形分为两种,即“描边”矩形和“填充”矩形。

    在 Canvas 中,我们可以将 strokeStyle 属性和 strokeRect()方法配合使用来画一个“描边矩形”。 cxt.strokeStyle = 属性值; cxt.strokeRect(x, y, width, height);
    (1)strokeStyle 属性 strokeStyle 属性取值有三种,即颜色值、渐变色、图案。对于 strokeStyle 取值为渐变色和图案的情况
    2)strokeRect()方法 strokeRect()方法用于确定矩形的坐标,其中 x 和 y 为矩形最左上角的坐标。注意,凡是对于 Canvas 中的坐标,大家一定要根据 W3C 坐标系来理解。此外 width 表示矩形的宽度,height 表示矩形的高度,默认情况下 width 和 height 都是以 px 为单位的。

    在 Canvas 中,我们可以将 fillStyle 属性和 fillRect()方法配合使用来画一个“填充矩形”。
    cxt.fillStyle=属性值; cxt.fillRect(x, y, width, height);
    x 和 y 为矩形最左上角的坐标,width 表示矩形的宽度,height 表示矩形的高度。strokeRect()、fillRect()和 rect()都可以画矩形。这三种方法参数是相同的,不同在于实现效果方面。其中 strokeRect()和 fillRect()这两个方法在调用之后,会立即把矩形绘制出来。而 rect()方法在调用之后,并不会把矩形绘制出来。只有在使用 rect()方法之后再调用 stroke()或者 fill()方法,才会把矩形绘制出来。
    x 和 y 为矩形最左上角的坐标,width 表示矩形的宽度,height 表示矩形的高度。strokeRect()、fillRect()和 rect()都可以画矩形。这三种方法参数是相同的,不同在于实现效果方面。其中 strokeRect()和 fillRect()这两个方法在调用之后,会立即把矩形绘制出来。而 rect()方法在调用之后,并不会把矩形绘制出来。只有在使用 rect()方法之后再调用 stroke()或者 fill()方法,才会把矩形绘制出来。

清空矩形

我们可以使用 clearRect()方法来清空“指定矩形区域”

曲线图形

圆形

我们可以使用 arc()方法来画一个圆
cxt.beginPath(); cxt.arc(x, y,半径,开始角度,结束角度,anticlockwise); cxt.closePath();

首先必须调用 beginPath()方法来声明“开始一个新路径”,然后才可以开始画圆。在使用 arc()方法画圆完成之后,我们还需要调用 closePath()方法来关闭当前路径。beginPath()和 closePath()一般都是配合使用的。其中,beginPath()表示“开始路径”,closePath()表示“关闭路径”
anticlockwise 是一个布尔值,当为 true 时,表示按逆时针方向绘制;当为 false 时,表示按顺时针方向绘制。anticlockwise 默认值为 false,也就是说默认情况下按顺时针方向绘制。

弧形

如果想要画弧线,常见的有两种方法:arc()、arcTo()。
//状态描述 cxt.beginPath(); cxt.arc(x, y,半径,开始角度,结束角度,anticlockwise); //描边 cxt.strokeStyle = “颜色值”; cxt.stroke();

“arc()画弧线”与“arc()画描边圆”最大的不同在于:arc()画弧线不使用 closePath()来关闭路径。这一点大家一定要区分开,因为弧线不是一个闭合图形。而 closePath()是用来绘制“封闭图形”的

可以使用 arcTo()方法来画一条弧线
cxt.arcTo(cx, cy, x2, y2, radius);
(cx , cy)表示控制点的坐标,(x2 , y2)表示结束点的坐标,radius 表示圆弧的半径。

如果我们想要画一条弧线,需要提供三个点的坐标:开始点、控制点和结束点。其中一般由 moveTo()或 lineTo()提供开始点,arcTo()提供控制点和结束点。arcTo()方法就是利用“开始点”“控制点”和“结束点”这三个点所形成的夹角,然后绘制一段与夹角的两边相切并且半径为 radius 的圆弧。其中,弧线的起点是“开始点所在边与圆的切点”,而弧线的终点是“结束点所在边与圆的切点”。

相关文章:

canvas 学习指南

canvas 学习指南 创建一个 canvas <! DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"><head><title></title><meta charset"utf-8" /><script type"text/javascript">window.onload fun…...

【华为OD机试2023】开心消消乐 C++

【华为OD机试2023】开心消消乐 C++ 前言 如果您在准备华为的面试,期间有想了解的可以私信我,我会尽可能帮您解答,也可以给您一些建议! 本文解法非最优解(即非性能最优),不能保证通过率。 Tips1:机试为ACM 模式 你的代码需要处理输入输出,input/cin接收输入、print/cou…...

学历?能力?

一个面试官愿意看一张有形的总结报告&#xff0c;还是愿意相信看不到的人品&#xff1f;...

使用ECharts打造一个数据可视化面板

使用ECharts打造一个数据可视化面板1. 使用技术2. 案例适配方案3. 基础设置4. header 布局5. mainbox 主体模块6. 公共面板模块 panel7. 柱形图 bar 模块&#xff08;布局&#xff09;8. 中间布局9. ECharts 介绍10. ECharts 体验11. ECharts 基础配置12. 柱状图图表&#xff0…...

【论文简述】PVSNet: Pixelwise Visibility-Aware Multi-ViewStereo Network(arxiv 2020)

一、论文简述 1. 第一作者&#xff1a;Qingshan Xu 2. 发表年份&#xff1a;2020 3. 发表期刊&#xff1a;arxiv 4. 关键词&#xff1a;MVS、3D重建、可见性、代价体、训练策略 5. 探索动机&#xff1a;ETH3D基准测试提供的图像包含强烈的视图变化&#xff0c;这就要求MVS…...

CSS隐藏元素的几种方式以及display、visibility、opacity的区别

CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了display:none设置元素不可见并且连盒模型也不生成&#xff0c;一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型&#xff0c;当其值为“none”时可以规定元素不生成…...

【Java|golang】1487. 保证文件名唯一---golang中string方法的坑

给你一个长度为 n 的字符串数组 names 。你将会在文件系统中创建 n 个文件夹&#xff1a;在第 i 分钟&#xff0c;新建名为 names[i] 的文件夹。 由于两个文件 不能 共享相同的文件名&#xff0c;因此如果新建文件夹使用的文件名已经被占用&#xff0c;系统会以 (k) 的形式为新…...

flstudio21水果language选项中文设置方法教程

编曲是通过DAW&#xff08;数字音频工作站软件&#xff09;完成的&#xff0c;也就是我们常说的宿主软件。现在有很多优秀的宿主软件&#xff0c;例如Cubase、Studio One、FL Studio等。 FL Studio是一款功能强大的音乐制作软件&#xff0c;也被称为FruityLoops。目前已经推出…...

Ubuntu中安装StaMPS

Ubuntu中安装StaMPS0 StaMPS简介1 首先安装好MATLAB&#xff0c;安装一些依赖工具包2 安装StaMPS2.1 下载StaMPS安装包2.2 安装2.3 配置环境2.4 matlab中的路径设置0 StaMPS简介 官网&#xff1a;https://homepages.see.leeds.ac.uk/~earahoo/stamps/ A software package to e…...

Spring Security 实现自定义登录和认证(1)

1 SpringSecurity 1.1 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>1.2 编写配置类 在spring最新版中禁用了WebSecurityConfigurerAdapter…...

Linux 进程:辨析wait与waitpid

目录一、wait二、waitpid(1)参数&#xff1a;pid(2)参数&#xff1a;status(3)参数&#xff1a;options(4)返回值wait 与 waitpid 这两个函数的作用是&#xff1a;等待子进程退出&#xff0c;在子进程退出后释放子进程资源&#xff0c;防止子进程变成僵尸进程。但准确的说&…...

移除元素(每日一题)

目录 一、题目描述 二、题目分析 2.1 方法一 2.1.1 思路 2.1.2 代码 2.2 方法二 2.2.1 思路 2.2.2 代码 一、题目描述 题目链接&#xff1a;27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数…...

打印名片-课后程序(Python程序开发案例教程-黑马程序员编著-第一章-课后作业)

实例2&#xff1a;打印名片 名片是标示姓名及其所属组织、公司单位和联系方法的纸片&#xff0c;也是新朋友互相认识、自我介绍的快速有效的方法。本实例要求编写程序&#xff0c;模拟输出效果如图1所示的名片。 图1 名片样式 实例目标 掌握print()函数的用法 实例分析 名片…...

为啥预编译SQL能够防止SQL注入

前言之前我一个搞网络安全的朋友问了我一个的问题&#xff0c;为啥用 PreparedStatement 预编译的 SQL 就不会有被 SQL 注入的风险&#xff1f;第一时间我联想到的是八股文中关于 Mybatis 的脚本 ${} 和 #{} 的问题&#xff0c;不过再想想&#xff0c;为啥 ${} 会有 SQL 注入的…...

IGKBoard(imx6ull)-SPI接口编程-回环测试

文章目录1- 使能imx6ull开发板SPI驱动2- 回环测试imx6ull开发板物理连接3- 编程SPI回环测试4- 代码重难点分析&#xff08;1&#xff09;spi_device结构体&#xff08;2&#xff09;spi_ioc_transfer结构体&#xff08;3&#xff09;ioctl函数对于SIP不了解的可以参考这篇文章&…...

Python基础学习10——类

基本概念 面向对象编程是最有效的软件编写方法之一。理解面向对象编程可以让你像程序员那样从一个更加宏观的角度去理解代码&#xff0c;并大大提高程序员之间的合作效率。面向对象编程的两个核心概念是对象和类 **对象&#xff1a;**对象是能帮助我们解决问题的具体东西。比如…...

项目实战典型案例14——代码结构混乱 逻辑边界不清晰 页面美观设计不足

代码结构混乱 逻辑边界不清晰 页面美观设计不足一&#xff1a;背景介绍问题1 代码可读性差&#xff0c;代码结构混乱问题2 逻辑边界不清晰&#xff0c;封装意识缺乏示例3.展示效果上的美观设计二&#xff1a;思路&方案问题一&#xff0c;代码可读性差&#xff0c;代码结构混…...

SpringBoot 读取自定义Properties参数

目录 1. 概述 2. 实现方式 2.1 Value方式 2.2 PropertySource与ConfigurationProperties相结合 3. 结束 1. 概述 最近想尝试写一个定时任务管理&#xff0c;相关参数不想在Spring的配置文件Application.yml或者Application.properties获取。想自己新建一个properties文件。顺…...

机器学习100天(三十七):037 朴素贝叶斯-挑个好西瓜!

《机器学习100天》完整目录:目录 机器学习100天,今天讲的是:朴素贝叶斯-挑个好西瓜! 红色石头已经了解了贝叶斯定理和朴素贝叶斯法,接下来已经可以很自信地去买瓜了。买瓜之前,还有一件事情要做,就是搜集样本数据。红色石头通过网上资料和查阅,获得了一组包含 10 组样…...

c#遍历窗口,根据标题获取handle并显示窗口

using System.Runtime.InteropServices;using System.Text;//1&#xff0c;定义//[DllImport("User32.dll", EntryPoint "FindWindow")]//public extern static IntPtr FindWindow(string lpClassName, string lpWindowName);[DllImport("user32.dll…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...