初识canvas

news2025/2/24 14:38:43

对于一个前端人员来说,canvas是必须掌握的技能之一。如果你想像画画一样在浏览器上作画,那么canvas就可以做你的画布。

接下啦我们就以画画的标准来初步认识下canvas

1.画布

画画的第一步你得有一张画纸或者画布,canvas标签就是我们的画布。

画布都是有尺寸的,如果你想要做大一点的画那就需要大一点的画布,反之也是,所以canvas上面有widthheight两个属性来定义画布的尺寸,单位是px

再想一个问题,如果我们需要做几张画,那我们就需要更多的画布,如何区分他们呢?
不如给他们每一个画布定义一个名字,canvas上的id就是他的名字,方便我们知道使用的是那一张画布。

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

2.画笔

画布准备好了,下一步就应该提笔作画了。但是画笔在哪?
我们可以通过getContext获取到我们的画笔。
注意getContext方法只有在canvas元素上才可以使用。

当然,并不是所有浏览器对canvas都有很好的兼容,ie浏览器只有9以上才可以使用,所以我们在使用的时候一般会使用getContext方法做判断,如果可以拿到该方法,那么就表示浏览器支持canvas,不支持的时候canvas标签会被当作普通标签,我们可以在canvas标签里面直接写提示内容:

<canvas id="c1" width="500" height="500">抱歉,您的浏览不支持canvas,请更新!</canvas>
//获取画布
let c1 = document.getElementById('c1')
if (!c1.getContext) {
	console.log('您的浏览器不支持acnvas')
	return false
}
//获取画笔
let ctx = c1.getContext('2d')

3.落笔

所有工具准备就绪,我们就可以开始落笔画画了。想要画出一幅完美的画,那你的心中一定是有一副草图在的。你应该知道你想要画一个什么东西,化的东西有多大,是什么形状。

假设我们现在需要画一个矩形,那我们心中首先需要对这个矩形的大小,方位做计算。我们打算把他画在画布的左边?还是右边?或者中间?是铺满整个画布还是占一半或者更小?

思考完上面的问题后我们就应该开始落笔了。
ctx.beginPath: 方法就是告诉画布我现在开始作画了。
ctx.rect(0, 120, 100, 100) : rect 就是专门画矩形的方法,里面包含四个参数,参数一和二分别标识矩形左上角的坐标,注意第二个参数y坐标不同于数学里面的坐标,它是向下的
在这里插入图片描述
参数3跟参数4则是这个矩形的宽高,这里我们设置的是一个宽高都为100的矩形。
这个时候其实矩形是不可见的。因为我们没有告诉画布我们是想要展示一个矩形边框路径还是一个被填充的矩形。
ctx.stroke():使用stroke就可以描绘出矩形的路径。
ctx.closePath():不要忘记告诉画笔已经结束绘画,可以提笔收墨了。
在这里插入图片描述
ctx.fill():当然我们也可以使用fill直接填充矩形让他展现。
在这里插入图片描述
有时候我们想直接画出一个绘制路径的矩形或者填充的矩形, 还可以使用fillRectstrokeRect,他们相当于是刻好的印章,可以直接印在画布上,而不用我们去一步一步描绘。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1027825.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

查看mysql 容量

SQL SELECT table_schema "database", sum( data_length index_length) / 1024 / 1024 /1024 "size in GB" FROM information_schema.TABLES GROUP BY table_schema;结果

CSS 之 grid 网格布局

一、简介 ​ display: grid;用于设置元素内部的布局类型为网格布局&#xff0c;其外显类型为块级元素。该类型的元素将内部分为行和列&#xff0c;划分成一个个单元格&#xff0c;并通过一系列相关属性控制单元格及其内容的布局和大小。 ​ 该属性值的主要应用场景为&#xf…

1297. 子串的最大出现次数

1297. 子串的最大出现次数 // 返回子串的最大出现次数&#xff1a;用hash表 // 子串中 不同字母的次数 < maxLetters && 子串长度> minSize && 子串长度 < maxSizeint maxFreq(char * s, int maxLetters, int minSize, int maxSize){}

【算法】矩阵快速幂优化动态规划

文章目录 知识讲解题目列表[矩阵快速幂] 题目列表&#x1f4d5;70. 爬楼梯解法1——线性DP解法2——矩阵快速幂 509. 斐波那契数1137. 第 N 个泰波那契数1220. 统计元音字母序列的数目解法1——线性DP解法2——矩阵快速幂优化DP 552. 学生出勤记录 II&#xff08;&#x1f6b9;…

Kafka 常见问题

文章目录 kafka 如何确保消息的可靠性传输Kafka 高性能的体现利用Partition实现并行处理利用PageCache 如何提高 Kafka 性能调整内核参数来优化IO性能减少网络开销批处理数据压缩降低网络负载高效的序列化方式 kafka 如何确保消息的可靠性传输 消费端弄丢了数据 唯一可能导致…

第N个数字

给你一个整数 n &#xff0c;请你在无限的整数序列 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, …] 中找出并返回第 n 位上的数字。 我觉得这题是哪以理解的 看这个题解 func findNthDigit(n int) int {digit : 1start : 1count : 9for n > count {n - countdigitstart start …

这个发表在 Nature Genetics的水稻全基因组关联数据库 RHRD,很赞!!!

历经半个世纪的发展&#xff0c;杂交水稻育种取得了巨大的成就&#xff0c;培育出了大量的高产、优质、适应环境变化的品系。本数据库是一个综合性的杂交水稻数据库&#xff08;http://ricehybridresource.cemps.ac.cn/#/&#xff09;&#xff0c;涵盖了从1976年至2017年间发布…

【Unity】简单的深度虚化shader

【Unity】简单的深度虚化shader 实现效果 可以用于对地图场景边界的白模处理 实现方法 1.关键方法 UnityObjectToClipPos&#xff1a;将物体坐标转换为屏幕坐标 LinearEyeDepth&#xff1a;将屏幕坐标中的z值转换为实际的深度值 saturate&#xff1a;将值规范到0~1之间&am…

Java 消息策略的实现 - Kafak 是怎么设计的

这个也是开放讨论题&#xff0c;主要讨论下 Kafka 在消息中是如何进行实现的。 1_cCyPNzf95ygMFUgsrleHtw976506 21.4 KB 总结 这个题目的开发性太强了。 Kafka 可以用的地方非常多&#xff0c;我经历过的项目有 Kafka 用在消息处理策略上的。这个主要是 IoT 项目&#xff0c…

three.js中的3D模型分层显示(分类型显示);使用dat.gui控制three.js中的3D模型分层显示;dat.gui调用一次但是渲染了多个

效果如上&#xff0c;就是可以通过dat.gui控制3D模型中仅仅显示管线或者是仅仅显示除了管线之外的模型。 1.在模型导入的时候就按照类型&#xff08;分层的类别标识&#xff09; 区别开&#xff08;我这里是按照是否是管线&#xff09; 这里是new THREE.Object3D();必须的否则…

Python基础学习笔记3

深度学习实践 深度学习离不开编程 深度学习离不开数学分析&#xff08;高等数学&#xff09;、线性代数、概率论等知识&#xff0c;更离不开以编程为核心的动手实践。 Python编程语言 无论是在机器学习还是深度学习中&#xff0c;Python已经成为主导性的编程语言。而且&…

OJ练习第178题——收集树中金币

收集树中金币 力扣链接&#xff1a;2603. 收集树中金币 题目描述 给你一个 n 个节点的无向无根树&#xff0c;节点编号从 0 到 n - 1 。给你整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ai, bi] 表示树中节点 ai 和 bi 之间有一条边。再给…

计算机视觉与深度学习-全连接神经网络-训练过程-欠拟合、过拟合和Dropout- [北邮鲁鹏]

目录标题 机器学习的根本问题过拟合overfitting泛化能力差。应对过拟合最优方案次优方案调节模型大小约束模型权重&#xff0c;即权重正则化(常用的有L1、L2正则化)L1 正则化L2 正则化对异常值的敏感性随机失活(Dropout)随机失活的问题 欠拟合 机器学习的根本问题 机器学习的根…

【企业级SpringBoot单体项目模板】 —— 全局配置

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;SpringBoot、模版、企业级☀️每日 一言&#xff1a;你坚持下来了&#xff0c;而别人坚持不下来&#xff0c;这就是你的资本。 文章目录 一、全局异常配置1.1 全局异常处理1.2 处理业务异常类1.3…

如何用ate自动测试设备对DC-DC电源模块负载调整率进行测试?

电源模块负载调整率测试是功能测试之一&#xff0c;是电源模块非常重要的一项指标&#xff0c;它的大小直接影响着电源模块的整体质量。因此使用ate自动测试设备对DC-DC电源模块负载调整率进行测试是制造生产过程中至关重要的一环。 电源模块负载调整率计算公式&#xff1a; 负…

1.测试 —— 答疑篇

什么是软件测试&#xff1a; 软件测试是不是就是找 bug &#xff1f; 软件测试就是证明软件不存在错误的过程 软件测试就是为了证明程序能够正确运行 刚新买来一部手机&#xff0c;我们要干什么&#xff1f; 一场考试 , 做完一遍题目之后 , 进行一遍检查 , 就是在 "…

10个强大的 JavaScript 动画库、直接抄作业

动画&#xff0c;是吸引你客户注意的好方法之一。 在项目开发中&#xff0c;我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验&#xff0c;同时&#xff0c;也为我们的网站增添了独特的美感&#xff0c;而且还提高了用户参与度并创造了令人难忘的第一印象。 因…

十几款IDEA开发必备的插件,新手必用

IDEA有很多优秀的插件&#xff0c;使用它们不仅大大增加了开发效率&#xff0c;也能给大家带来更好的coding体验。“工欲善其事必先利其器”&#xff0c;以下插件基本都可以通过 IDEA 自带的插件管理中心安装。 1、CodeGlance 拖动浏览代码更加方便&#xff0c;还有放大镜功能。…

C语言计算2的1024次方

C语言计算2的1024次方 迅雷有这么一道笔试题&#xff0c;编程计算2的1024次方。 所谓2的1024次方&#xff0c;就是有1024个2相乘&#xff0c;于是有些同学顺手就能写出代码&#xff1a; int main() {int reslut 1;for (int i 0; i < 1024; i){result * 2;}printf("…

Nmap(端口扫描工具)在Windows上的安装和使用,so easy

文章目录 一、下载安装图形化指引下载 二、安装使用非常简单参考文档 一、下载安装 Nmap官方下载平台 图形化指引下载 二、安装 什么都不要动&#xff0c;一直下一步 使用非常简单 参考文档 Nmap的安装与使用