学习Canvas过程中2D的方法、注释及感悟一(通俗易懂)

1.了解Canvas:

        Canvas是前端一个很重要的知识点,<canvas>标签用于创建画布绘制图形,通过JavaScript进行操作。它为开发者提供一个动态绘制图形的区域,用于创建图标、游戏动画、图像处理等。

        对于能够熟练使用Canvas的开发者来说,能够创建出很多令人惊奇的效果,因为我也是刚学了一半,所以对于Canvas要实现的真实目标还不是特别了解,但是对于初学者或者急需使用一些简单方法的同学来说还是会有一些帮助的。Canvas有2D画布和3D画布,目前我学习的仅是2D。

2.学习过程中对Canvas方法的认识

        对于一个图形来说,有两种绘制方式,一种是路径(stroke),另一种是填充(fill)。以长方形为例,路径就是只描绘出长方形的轮廓,脱俗来说就是画一个空心长方形;填充就是指这个长方形区域内都属于该长方形,通俗来说就是画一个实心长方形。这两个概念对于了解PS的同学应该会很容易了解,不了解PS的同学也不用着急,继续往下看,按照下面的方法写一下就可以感受到路径和填充的区别。规律一对于Canvas中所有带有stroke/fill的方法基本都可以使用fill/stroke进行替换,用来切换绘制路径或者绘制填充

        在绘制图形时,有些图形的方法可以使用“绘制方法+图形(图形首字母大写)”来表示,例如对于绘制矩形来说:fillRect就是绘制填充矩形,strokeRect就是绘制路径矩形。但是并不是所有的图形都可以这样写,比如绘制弧线(arc),也就时圆形,当弧度为2PI时就是一个圆,它就不可以使用fillArc或者strokeArc来绘制。但是所有图形都可以分开写,依然以矩形为例:

//参数先不写,下面会详细说
ctx.rect()
ctx.fill()//绘制填充矩形
ctx.stroke()//绘制路径矩形

 规律二Canvas中绘制图形都可以通过分开来写,但是并不是所有都可以使用简写

3.基本代码解释

//HTML
<!-- id:标识元素的唯一性width:画布的宽度height:画布的宽度-->
<canvas id="c1" width="500" height="500" style="border: 1px solid;"></canvas>//JS
//获取画布
let c1 = document.getElementById('c1')
//获取2D画笔,上下文对象,该对象一般使用ctx表示
let ctx = c1.getContext('2d')

 上面展示的代码中是使用2Dcanvas的必写步骤,第一行代码中的style表示给画布一个边框,方便我们观察画布和图形的具体位置和大小,第三行表示的就是获取2D画笔。

值得一说的是:因为我目前对canvas理解还不是特别深刻,所以没办法理解只在CSS中设置宽高或者不设置宽高的绘制方法,但是如果都设置的话就会出现一定的问题——如果在CSS中为canvas标签设置宽高,如果设置的和canvas标签中的相同,那么就没有影响;如果在CSS中设置的宽高与canvas标签中设置的不同,那么绘制出来的图形也会按照canvas标签中的宽/高与CSS中宽/高之比进行一定的变化,导致即使画出的时正方形,那么绘制出来也不是正方形。因此得出规律三一般情况下只在canvas中设置宽高

4.方法详解

        3.1.绘制方法(因为分开写是通用的,所以以分开为例):

                3.1.1.绘制矩形:

                        ctx.rect(左上角x坐标,左上角y坐标,矩形宽,矩形高)

                3.1.2.绘制弧形:

                        ctx.arc(圆心x坐标,圆心y坐标,开始时弧度位置,结束时弧度位置,[顺/逆时针绘制])        //开始/结束时弧度位置使用的时弧度制,弧度的单位是:Math.PI,1Math.PI=180°,初始0弧度是x轴正方向。最后一个参数是布尔类型,可以省略的,默认是false(顺时针),可以修改为true(逆时针)。

                3.1.3.绘制线段

                        ctx.moveTo(落笔点x坐标,落笔点y坐标)        //众所周知,大家在写字时,是通过不断抬笔、落笔画出的一条条线段组成的文字,在画布上时也相当于这样,该方法就是类似抬笔并且将笔放到指定的位置,如果不使用该方法,那么无论画出来的图形还是线端,都会“连笔”,显得不好看,而在绘制线段中的作用就是设置线段出事的落笔点。

                        ctx.lineTo(结束点x坐标,结束点y坐标)        //如果再次调用该方法,并且使第二个结束点坐标与moveTo设置的落笔点和上一个落笔点不处于一条直线,那么就可以绘制出一条折线。

                3.1.4.第二种绘制弧形的方法

                        ctx.arcTo(夹角点x坐标,夹角点y坐标,第三个点x坐标,第三个点y坐标,半径)

                        //该方法同样需要使用moveTo()来设置第一个点,该方法的原理如下:连接第一个点和夹角点,连接第三个点和夹角点,此时三个点组成一个以夹角点为顶点的角,此时的圆心就是向两条边做垂线,当两边长度都是设置的半径时,此时以两条边焦点为圆心,垂直两条边的两个点画圆弧,得到的就是该方法获得的圆弧。因为该方法使用较为困难并且使用场景较少,因此,一般情况下使用arc即可。

                3.1.5.关于二次贝塞尔曲线和三次贝塞尔曲线

                都需要使用ctx.moveTo()来设置初始位置,二次贝塞尔曲线和三次贝塞尔曲线都是用来画不规则曲线的,二次贝塞尔曲线是用一个控制点加开始点和结束点来绘制弧形,三次贝塞尔曲线是用两个控制点加开始点和结束点来绘制弧形,因此三次贝塞尔曲线可以画出更复杂精确的弧线。

                二次贝塞尔曲线

                        ctx.quadratcCurveTo(控制点x坐标,控制点y坐标,结束点x坐标,结束点y坐标)        具体原理如下图:这个理解起来不好说,只能去看视频自己理解了。

                三次贝塞尔曲线

                        ctx.bezierCurveTo(控制点1x坐标,控制点1y坐标,控制点2x坐标,控制点2y坐标,结束点x坐标,结束点y坐标)        //具体的画图原理同样不是特别理解,这需要同学们自己观看这一块来学习了。原理如下图:

 

        3.2.样式方法:

                3.2.1.设置颜色:

                        ctx.fillStyle='颜色'        //设置填充颜色,引号内参数“颜色”可以使用单词、rgb格式、rgba格式或者十六进制格式都可以。根据规律一,可以将fill换成stroke表示设置路径颜色。

                3.2.2.路径分段:

                        在上面大家应该看到了对moveTo()的注释,moveTo()的作用是一个抬笔并落笔到指定点的操作,而路径分段则相当于直接告诉canvas——接下来绘制的东西和上一个没关系了。于是canvas就会自动抬笔,从而实现取消“连笔”的效果。

                        语法:

                                ctx.beginPath()        //分段开始

                                ...                        //内容

                                ctx.closePath()        //分段结束

                        而路径分段有一些注意点:在路径分段内,可以定义本段路径的属性,比如每段都可以设置自己的颜色等。注意:在不同的路径分段中,定义的属性会向下一个分区传播,但是不会向上一个分区传播。同一分区中的属性以绘制前最后一次定义为主;不仅是在分段中,即使不分段也会是这样,规律四在canvas的属性设置中,以绘制前最后一次定义为主,即使在分段中也是一样。如下:

ctx.fillStyle='red'//分段外设置红色
ctx.fillRect(100, 100, 100, 100)//红色矩形
ctx.beginPath()//分段开始
ctx.arc(300,300,100,0,Math.PI*2)//定义一个圆
ctx.fillStyle='black'//设置黑色
ctx.fill()//绘制上面定义的所有图形,黑色,如果没有上一行的颜色设置那么就是红色
ctx.fillStyle="yellow"//设置黄色,因为是在绘制之后设置的,所以对本分段内图形无影响,只能影响下方绘制的图形
ctx.closePath()

就在刚才,我得到了规律五在canvas中,一旦获取画笔之后,所有的方法(除了图片加载结束)都需要加上画笔变量“ctx”(因为我在写分段的时候没有加ctx,所以一直绘制不成功qwq)。

                3.2.3.设置透明度

                        语法:ctx.globlAlpha="值"        //值为0~1,可以设置全局,rgba只能设置单个。

       因时间问题,先不继续写了,下次该讲解渐变。

附带Canvas文档:Canvas 教程 - Web API | MDN (mozilla.org)

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

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

相关文章

星舰四飞成功!SpaceX 今年还要飞 4 次?星舰未来 10 年规划展望

SpaceX 的星舰&#xff08;Starship&#xff09;项目一直备受瞩目&#xff0c;最近的第四次试飞再次引发了全球关注。本文将详细回顾星舰第四次发射的成功经验&#xff0c;并探讨其未来的十年规划。 一、引言 星舰是 SpaceX 研制的下一代重型运载火箭系统&#xff0c;旨在实现…

苍穹外卖笔记-06-菜品管理-菜品分类,公共字段填充

菜品分类 1 菜品分类模块1.1 需求分析与设计1.1.1 产品原型1.1.2 接口设计1.1.3 表设计 1.3 代码实现1.4 测试分类分页查询启用禁用分类修改分类信息新增菜品分类删除菜品分类 2 公共字段自动填充2.1 问题分析2.2 实现思路自定义注解AutoFill自定义切面AutoFillAspectMapper接口…

LeetCode338比特位计数

题目描述 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 解析 动态规划&#xff0c;将当前的数的最后一位去掉&#xff0c;然后判断去掉的最后一位是0还是1。…

Qwen2来了

Qwen2整体介绍 Qwen2开源模型下载 Demo使用 Git 官方使用文档 变化 1、增大了上下文长度支持&#xff0c;Qwen2-72B-Instruct支持128K tokens&#xff0c;并且处理完美 2、代码和数学能力显著提升 3、多个评测基准上的领先表现 4、中英之外增加了27种语言相关的高质量…

CNCF项目全景图介绍

本文首发在个人博客上&#xff0c;欢迎来踩&#xff01; 云原生计算基金会&#xff08;CNCF&#xff09;介绍 CNCF(Cloud Native Computing Foundation)官网链接&#xff1a;https://www.cncf.io/ 官方的介绍如下&#xff1a; 云原生技术有利于各组织在公有云、私有云和混合…

Transformer论文精读

Transformer&#xff1a;Attention is all you need Abstract&#xff1a; 在主流的序列转录模型&#xff08;sequence transduction models&#xff1a;给一个序列&#xff0c;生成另一个序列&#xff09;&#xff0c;主要依赖循环或者卷积神经网络&#xff0c;一般是用enco…

Buildroot和Debian文件系统修改方法

本文档主要介绍在没有编译环境的情况下&#xff0c;如何修改buildroot和debian文件系统方法&#xff0c;如在buildroot文件系统中添加文件、修改目录等文件操作&#xff0c;在debian文件系统中&#xff0c;安装软件库、工具、扩大文件系统空间等等操作。 1.Debian文件系统 …

算法 | hbut期末复习笔记

贪心选择策略&#xff1a;所求问题的整体最优解可以通过一系列局部最优的选择&#xff08;贪心选择&#xff09;得到 最优子结构&#xff1a;问题的最优解包括了其子问题的最优解 回溯法&#xff1a;具有限界函数的深度优先搜索法 回溯法的解空间&#xff1a;子集树&排列…

全新抖音快手小红书视频解析去水印系统网站源码

这个系统支持几十种平台&#xff0c;包括抖音、快手小红书以及其他热门社交媒体平台。它可以帮助轻松地下载这些平台上的任何视频&#xff0c;并去除其中的水印&#xff0c;让你可以自由地保存和分享这些视频。 使用方法&#xff1a; 上传压缩包解压&#xff0c;网站信息在inc…

【JAVASE】面向对象编程综合案例--------模仿电影信息系统

需求&#xff1a; &#xff08;1&#xff09;展示系统中的全部电影&#xff08;每部电影展示&#xff1a;名称、价格&#xff09; &#xff08;2&#xff09;允许用户根据电影编号&#xff08;ID&#xff09;查询出某个电影的详细信息。 目标&#xff1a;使用所学的面向对象…

洛谷B2095 白细胞计数

#include<bits/stdc.h> using namespace std; double a[520],cnt,min199999999,max1-1,max2,min2,max3-1; int main(){int n;cin>>n;for(int i1;i<n;i){cin>>a[i];min1min(min1,a[i]);if(a[i]min1){min2i;}//确定最大值 max1max(max1,a[i]);if(a[i]max1){…

基于SVPWM矢量控制的无速度传感器电机控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于SVPWM矢量控制的无速度传感器电机控制系统simulink建模与仿真&#xff0c;包括电机&#xff0c;SVPWM模块&#xff0c;矢量控制器模块等。 2.系统仿真结果 3.核心程序与模…

Java+前端+Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码

Java前端Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码 UWB定位系统由硬件定位设备、定位引擎和应用软件组成。该定位系统应用软件支持PC端和移动端访问&#xff0c;并提供位置实时显示、历史轨迹回放、人员考勤、电子围栏、行为分析、智能巡检等功能…

gcc源码分析 词法和语法分析

gcc源码分析 词法和语法分析 一、输入参数相关1、命令行到gcc二、词法与语法分析1、词法分析1.1 struct cpp_reader1.2 struct tokenrun/struct cpp_token/lookahead字段1.3 struct ht2.1 语法符号相关的结构体c_token定义如下:2.2在语法分析中实际上有多个API组成了其接口函数…

vue2中的插槽使用以及Vuex的使用

插槽分为默认插槽&#xff0c;定名插槽还有作用域插槽 一.默认插槽&#xff0c;定名插槽 //app.vue <template> <div class"container"><CategoryTest title"美食" :listData"foods"><img slot"center" src&qu…

使用 Python 和 Selenium 进行网络抓取

如果你今天的工作是从竞争对手的网站上抓取定价页面信息。你会怎么做&#xff1f;复制粘贴&#xff1f;手动输入数据&#xff1f;当然不行&#xff01;他们绝对会花费你超级多的时间&#xff0c;而且你可能会犯一些错误。 需要指出的是&#xff0c;Python已经成为最流行的数据…

使用 Qwen-Agent 将 8k 上下文记忆扩展到百万量级

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 汇总合集…

C# 绘图及古诗填字

绘图 绘图的结果如下&#xff1a; 绘图部分主要使用了 Bitmap、Graphics 具体的函数是 MakeMap 入参说明 string bg : 背景图 Rectangle rect &#xff1a;绘图区域 int row_count &#xff1a;行数 int col_count &#xff1a;列数 string fn &#xff1a;保存到的文件 …

Unity Standard shader 修改(增加本地坐标裁剪)

本想随便找一个裁剪的shader&#xff0c;可无奈的是没找到一个shader符合要求&#xff0c;美术制作的场景都是用的都标准的着色器他们不在乎你的功能逻辑需求&#xff0c;他们只关心场景的表现&#xff0c;那又找不到和unity标准着色器表现一样的shader 1.通过贴图的透明通道做…

【Java 百“练”成钢】Java 基础:类和对象

Java 基础&#xff1a;类和对象 01.打印信息02.打印类的简单名称03.打印类的 ClassLoader04.获取类的方法05.获取类的Package06.创建一个对象数组07.计算圆的面积08.计算圆的周长09.创建具有私有访问修饰符的成员10.创建带访问修饰符的成员11.将对象作为参数传递12.通过类对象获…