初识canvas

对于一个前端人员来说,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.rhkb.cn/news/137626.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中华崛起,科技强国!这三款充满科技风的科技模板,一起来探索吧

最近是不是都被华为mate60和苹果15刷屏了啊 &#xff0c;在我们的生活中&#xff0c;科技有着千变万化的面貌。它让我们的世界变得越来越小&#xff0c;让我们的生活越来越便捷。它使我们的梦想成为现实&#xff0c;使我们的思想得以落地。它打开了新的视野&#xff0c;为我们提…

grafana对指标进行组合计算

在使用Grafana配置图表看板时&#xff0c;我们可能需要对多个查询条件筛选出来的结果进行计算&#xff0c;把计算结果生成最终的图表。此时需要用到transform功能【add field from calculation】&#xff1a;

keytool工具生成JKS证书

生成证书 使用jdk keytool生成证书 自建证书不受CA信任&#xff0c;仅适合学习使用&#xff0c;如果需要用到服务中&#xff0c;建议使用由CA颁发的可信证书。如果仅是内部使用&#xff0c;也可以安装自己生成的证书到本机。 生成证书 keytool -genkey -alias jwt -keyalg RS…

【linux基础(七)】Linux中的开发工具(下)--make/makefile和git

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到开通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux中的开发工具 1. 前言2.…

重装系统(配置环境)

这里写目录标题 0.重装系统1.python1.1 anaconda1.2 pycharm1.3 深度学习环境配置 2.java2.1.安装JDK2.2.配置JDK环境变量2.3IDEA2.4 Maven 3.大数据3.1 虚拟机3.2 Hadoop平台3.3 存储3.4 采集3.5 计算3.6 查询3.7 可视化 0.重装系统 // An highlighted block var foo bar;1.…

SpringBoot 的版本、打包、Maven

一、SpringBoot 结构、集成 1.1、集成组件 Spring Core&#xff1a;Spring的核心组件&#xff0c;提供IOC、AOP等基础功能&#xff0c;是Spring全家桶的基础。 Spring Boot&#xff1a;一个基于Spring Framework的快速开发框架&#xff0c;可以快速创建独立的、生产级别的…

pnpm入门教程

一、概述 1、更小 使用 npm 时&#xff0c;依赖每次被不同的项目使用&#xff0c;都会重复安装一次。 而在使用 pnpm 时&#xff0c;依赖会被存储在内容可寻址的存储中。 2、更快 依赖解析。 仓库中没有的依赖都被识别并获取到仓库。目录结构计算。 node_modules 目录结构是…

Vue3快速上手

1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;Release v3.0.0 One Piece vuejs/core GitHub 2.Vue3带…

二叉搜索树(BST,Binary Search Tree)

文章目录 1. 二叉搜索树1.1 二叉搜索树概念1.2 二叉搜索树的查找1.3 二叉搜索树的插入1.4 二叉搜索树的删除 2 二叉搜索树的实现3 二叉搜索树的应用3.1二叉搜索树的性能分析 1. 二叉搜索树 1.1 二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xf…

大模型对外提供应用的三种服务方式及示例

最近在研究Llama大模型的本地化部署和应用测试过程中&#xff0c;为了给大家提供更多的应用方式&#xff0c;研究了如何利用python快速搭建各种应用访问服务&#xff0c;一般来说&#xff0c;我们开发完成的软件模块为了体现价值&#xff0c;都需要对外提供服务&#xff0c;最原…

【css】如何实现自定义滚动悬浮置顶、固定表头

说到固定表头或者滚动置顶&#xff0c;我们需要认识css的两个api的2个属性&#xff1a; position: sticky; position: sticky; 是 CSS 中的一种定位方式。当应用于元素时&#xff0c;该元素在滚动时会固定在父容器的指定位置&#xff0c;直到滚动到达特定的位置或条件满足后&…

APP产品经理岗位的具体内容(合集)

APP产品经理岗位的具体内容1 1、负责项目产品团队的管理工作&#xff0c;对项目产品团队考核目标负责; 2、全面负责“工务园”所有产品&#xff0c;全方位负责其生命周期管理; 3、按照产品管理相关的计划和规范&#xff0c;对产品版本的更新及发布负责&#xff0c;完善产品的…

书剑宠物疫苗接种管理软件操作教程

【软件简介】 书剑宠物疫苗接种管理软件是一款宠物疫苗接种管理的工具&#xff0c;适合宠物诊所使用。具有动物主人建档、宠物疫苗接种登记管理、每日提醒、打印疫苗接种通知卡、自定义短信提醒模板等完善的功能。 另外本软件的特色是同时具有手机网页版功能&#xff0c;手机…

警惕!多本SCI/SSCI被剔除,9月SCI/SSCI期刊目录已更新~(附下载)

【SciencePub学术】 2023年9月20日&#xff0c;科睿唯安更新了Web of Science核心期刊目录。 继上次SCI期刊目录和SSCI期刊目录更新之后&#xff0c;本次9月更新共有9本期刊发生变动&#xff1a; • SCIE&#xff1a;有3本期刊不再被SCIE期刊目录收录(Editorial De-listing/Pr…

VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)

一、注释 <!--这是注释-->&#xff0c;在这个<!--内容-->里面的是注释&#xff0c;内容就是你要填写的注释。 在windows上查看&#xff0c;你是使用F12&#xff0c;但是mac上(我也不清楚为什么f12不好使&#xff0c;这时候就要按照下面的步骤调出这个界面 看这个高…

【校招VIP】前端JS之深拷贝和浅拷贝

考点介绍 js中的浅拷贝和深拷贝&#xff0c;只是针对复杂数据类型(Objcet&#xff0c;Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。 前端JS之深拷贝和浅拷贝-相关题…

聊聊Spring的Aware接口

文章目录 0.前言1.什么是Aware接口2.Aware接口的设计目的3.详解3.1. ApplicationContextAware我们举个例子来说明 3.2. BeanFactoryAware3.3. BeanNameAware3.4. ServletContextAware3.5. MessageSourceAware3.6. ResourceLoaderAware 4.参考文档 0.前言 背景&#xff1a; 最近…

Spring Boot魔法:简化Java应用的开发与部署

文章目录 什么是Spring Boot&#xff1f;1. 自动配置&#xff08;Auto-Configuration&#xff09;2. 独立运行&#xff08;Standalone&#xff09;3. 生产就绪&#xff08;Production Ready&#xff09;4. 大量的起步依赖&#xff08;Starter Dependencies&#xff09; Spring …

【SpringMVC】JSR 303与interceptor拦截器快速入门

目录 一、JSR303 1、什么是JSR 303&#xff1f; 2、为什么要使用JSR 303&#xff1f; 3、JSR 303常用注解 3.1、常用的JSR 303注解 3.2、Validated与Valid区别 3.2.1、Validated 3.2.2、Valid 3.2.3、区别 4、使用案例 4.1、导入依赖 4.2、配置校验规则 4.3、编写…

大模型Tuning分类

类型总结 微调&#xff08;Fine-tunning&#xff09; 语言模型的参数需要一起参与梯度更新 轻量微调&#xff08;lightweight fine-tunning&#xff09; 冻结了大部分预训练参数&#xff0c;仅添加任务层&#xff0c;语言模型层参数不变 适配器微调 &#xff08;Adapter-t…