前端实现可绘制的canvas画布_前端图形学基础(五)——Canvas状态管理

点击右上角的关注,不定期前端干货分享!!

欢迎来到我的前端图形学系列文章:

前端图形学基础(一)——Canvas基础入门

前端图形学基础(二)——Canvas基础

前端图形学基础(三)——Canvas绘制图片

前端图形学基础(四)——Canvas绘制曲线

我们已知晓,canvas画布,画笔的概念。如果说,我们只是在画布上绘制基础的图形,那是否感觉canvas能力有限呢?

其实不然,现在世面上的h5游戏基本都是基于canvas来实现的,也就是说,我们不仅要在画布上绘制图形,还要让图形对象能在画布上做矩阵变换、物理碰撞检测等,这时候我不得不提到canvas又一个非常重要的API。Canvas的状态的保存和恢复。

状态的保存和恢复

//保存画布(canvas)的所有状态

context.save();

恢复画布(canvas)的所有状态

context.restore();

这两个方法一般配合一起使用。

什么意思?比如我们在调用了context.translate(x,y)方法后,会将canvas原点移动到x,y的位置(默认原点为0,0),那么在context.translate之后的绘制图形都会以(x , y)为原点开始绘制的。废话少说,直接上示例:

context.fillStyle = '#f00';context.translate(100,100);context.fillRect(0,0,100,100);context.strokeRect(100,100,100,100);

这个 demo 我先将原点移动到(100,100)的位置,然后依次绘制了两个矩形,效果如下:

6f78acdfa29737bbb3ac4b32305a956b.png

可以看到,两个矩形都会受到translate的影响,这往往在我们实际的开发过程中不是我们想要的,接下来我们通过canvas的状态管理来解决这个问题。

context.save();context.translate(100,100);cntext.fillRect(0,0,100,100);cotext.restore();conext.strokeRect( 50,50,100,100);

效果如下:

94f8c7166d1649a0a29c2c24b953768c.png

这里面我们把translate方法和绘制第一个矩形放在了save和restore方法之间。这样可以使我们translate效果只能作用在save和restore之间。我们从图中可以看到,黑色的矩形框并未受到translate原点平移的影响。问题得到解决。

在canvas中,需要用到状态管理的有以下这些方法:

1、context.rotate(angle);

2、context.scale(scaleX,scaleY);

3、transform(m11, m12, m21, m22, dx, dy);

4、setTransform(m11, m12, m21, m22, dx, dy)

我们在开发过程中用到这些方法的切记加上状态管理机制,方能保证图形按照我们预期的去绘制了。

关于canvas状态管理就到这。这里是【畅哥聊技术】前端图形学系列文章,更多精彩敬请关注,未完待续。。。

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

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

相关文章

sudo su su_Spring Security应用程序中的su和sudo

sudo su su很久以前,我从事的项目具有很强大的功能。 有两个角色:用户和主管。 主管可以以任何方式更改系统中的任何文档,而用户则更受工作流约束的限制。 当普通用户对当前正在编辑并存储在HTTP会话中的文档有疑问时,主管可以介入…

linux如何判断同名进程个数,Linux下判断是否存在多个同名进程

Linux 下如何判断同名进程的个数,这个可以通过shell命令ps -e | grep -c "所查进程名字",就可以得到进程的个数。这里给出代码实现。bool processNumber(char *name){FILE *fptr;bool bret false;char cmd[255] {\0};char buf[255] {\0};sp…

having和where可以同时使用吗_阴、阳离子聚丙烯酰胺可以同时混合溶解使用吗?...

聚丙烯酰胺是一种水处理药剂,需要溶解在水中制成浓度为0.1%-0.5%的聚丙烯酰胺水溶液。一般来说,当聚丙烯酰胺实际使用时,阴离子聚丙烯酰胺和阳离子聚丙烯酰胺可以同时使用。但是,阳离子聚丙烯酰胺和阴离子聚丙烯酰胺不能混合在一起…

Lombok,AutoValue和Immutables,或如何编写更少,更好的代码返回

在上一篇有关Lombok库的文章中 ,我描述了一个库,该库有助于处理Java中的样板代码( 是的,我知道这些问题已经在Kotlin中解决了 ,但这是现实生活,我们不能一味地坐下来,一旦出现较新或更简单的语言…

noj大作业c语言扫雷,noj大作业.doc

作业名称:算法演示程序学 院:航海学院班 级:学 号:2013300951姓 名:苏和团队组成:西北工业大学2015年11月11日1、问题与背景(描述程序所要解决的问题或应用背景)C语言经过几十年的发展已经发展出多种多样的…

福州PHP讲师招聘_“艺”起就业|招聘信息汇总

亲爱的美术学院毕业生们在全国上下万众一心抗击新冠肺炎疫情的关键时期学院党委高度重视并时刻关注着每一位毕业生的就业工作为进一步做好疫情防控工作也为进一步确保同学们顺利求职就业保障毕业生就业工作的时效性学院公众号特别设立“艺”起就业—招聘信息发布栏目 由院学工…

哪个app最费电_关于石墨烯养生地暖,业主最关心的几大问题,答案附上!

很多人对石墨烯地暖有些许误解,不敢轻易接受。其实不然,石墨烯地暖是一种供热效果好、安全性高、运用寿命长、节能环保的新型健康采暖方式,不仅适用于住宅小区、别墅等家庭采暖,也可用于办公楼、医院等各类公共建筑采暖。在众多对…

双机之间的串行通信设计 c语言编程,双机串行通信设计精品.doc-资源下载人人文库网...

双机串行通信设计 精品.doc所属课程名称 单片机原理与接口技术 题 目 双机串行通信 二 总体设计2.1 设计目的 通过本次课题设计,应用单片机原理及其接口技术等所学相关知识及查阅资料,完成简易双机串行通信设计,以达到理论与实践更好的结合、…

cpu 抖动_微抖动,繁忙的等待和绑定CPU

cpu 抖动性能分析新机器 当我在新机器上工作时,我想了解它的局限性。 在这篇文章中,我将研究机器的抖动以及忙于等待本周末构建的新PC的影响。 该机器的规格很有趣,但不是发布目的。 永远不要少于它们: i7-3970X六核运行于4.5 GH…

南京邮电大学通达学院c语言实验报告,南京邮电大学通达学院c语言程序报告.docx...

南京邮电大学通达学院c语言程序报告南京邮电大学通达学院程序设计(上机)报告题 目: R015M P008E专 业 学 生 姓 名 班 级 学 号 指 导 教 师 日 期 2015年5月评 分 细 则评分项优秀良好中等及格不及格遵守机房规章制度上机表现学习态度基础知识水平程序设计能力课题…

两端分散对齐怎么设置_Word文字很难对齐?用这4个方法,2秒可对齐所有文字!...

日常工作中,我们在给Word文档进行对齐操作的时候,很多人都是猛敲空格键来对齐文字,通常是一顿操作猛如虎,仔细一看原地杵。简单的文字对齐,这种方法可能还算凑效,但稍显复杂的就不那么管用了。今天叨叨君就…

怎样学c++程序语言,如何学好 C++——学习门槛最高的编程语言

根据InfoQ 编程语言 2 月排行榜,统计发现,学习门槛最高的编程语言是 C。那么如何学好这门又难、门槛又高的语言呢?前面我们介绍过C。C是一种面向对象的计算机程序设计语言,由美国AT&T贝尔实验室的本贾尼斯特劳斯特卢普博士在2…

首个JDK 10(18.3)发行候选版(内部版本43)展示了新的版本控制方案

Mark Reinhold的帖子“ JDK 10:First Release Candidate ”宣布“内部版本43中没有未解决的P1错误”,并将Build 43命名为最初的JDK 10版本候选 。 Reinhold帖子还指向“ JDK 10 Early Access Builds ”页面,该页面包含发行说明的链接。 到基于…

7 centos 查看程序文件数量_CentOS之使用Systemd添加自定义系统服务

文章引言Systemd 就是为了解决Linux 的启动一直采用init进程问题而诞生的。它的设计目标是,为系统的启动和管理提供一套完整的解决方案。根据 Linux 惯例,字母d是守护进程(daemon)的缩写。 Systemd 这个名字的含义,就是…

做完c语言通讯录系统后的小结,c语言通讯录管理系统的总结

c语言通讯录管理系统的总结c语言通讯录管理系统的总结c语言课设管理系统总结完成情况防暴力输入密码加密输入并删除管理员和用户端两个端管理员对用户的账号删除注册用户用户的账户名及密码修改用户基本操作管理员基本操作存在的问题管理员无法对用户的数据进行修改未使用链表由…

因特尔显卡自定义分辨率_电脑显示器分辨率超频教程:1080P超2K分辨率的方法...

我们玩过CPU超频、显卡超频、内存超频等,相信不少用户还没有尝试过显示器超频,其实在前段时间,装机之家为广大爱好者发布了一篇【电脑显示器刷新率怎么超频?电脑显示器提高屏幕刷新率超频教程】文章,我们将一款普通60H…

pyinstaller安装失败解决

1.看到直接输入pip install pyinstaller 似乎很简单 2.尝试结果失败 3.其实失败有很多原因,但是有一个自我感觉通用的办法: 使用管理员身份打开cmd 输入 python -m pip install --upgrade pip 输入 pip install pywin32 输入 pip install wheel 输入 pip…

android pdu 编码规则,[转载]PDU编码规则

目前,发送短消息常用Text和PDU(Protocol DataUnit,协议数据单元)模式。使用Text模式收发短信代码简单,实现起来十分容易,但最大的缺点是不能收发中文短信;而PDU模式不仅支持中文短信,也能发送英文短信。PDU…

Java 9示例–收集的工厂方法–创建不可修改的列表,集合和映射

大家好,这是我在该博客上发表的有关Java 9功能的第一篇文章,今天您将了解我最喜欢的功能“收集的工厂方法” ,它是JEP 269的一部分。JEP代表JDK增强建议。 如果您曾经在Groovy或Kotlin工作过,那么您就会知道使用集合文字使用元素创…

郴州郴锦机器人_减税降费宣传走进郴州市民营企业高质量发展专题培训班

红网时刻郴州8月23日讯(通讯员 陈磊 记者 欧群军)“毫不动摇支持民营经济健康发展离不开税收政策的有力支持。近年来,特别是今年以来国家系列税收优惠政策的出台,为民营经济的发展注入了新的活力。”8月22日,郴州市税务局减税降费宣讲课堂走进…