html5选择状态,HTML5 Canvas 状态
HTML5 Canvas 状态
我们在canvas上绘制图形的时候,经常需要通过save()和restore()改变2D上下文的状态。举例来说,你在绘制直线或矩形的时候需要一种strokStyle,在绘制下一条直线或矩形的时候需要另一种strokStyle。又或者是不同的填充色,旋转角度等
当使用其2D上下文在HTML5画布上进行绘制时,该2D上下文处于某种状态。您可以通过操纵2D上下文属性(例如fillStyle 和)来设置该状态strokeStyle。所有这些操作总共称为2D上下文state。
通常,在画布上绘制时,您需要在绘制过程中更改2D上下文的状态。例如,strokStyle对于一条直线或矩形,可能需要一个,而strokeStyle对于其他直线或矩形,则可能需要另一个 。或其他轮换,或其他。
由于在绘制每个形状之前设置完整状态非常麻烦,因此可以将状态推送到状态堆栈上。然后可以从此状态堆栈中弹出较早的状态。这是在临时状态更改后恢复较早状态的快速方法.
HTML5 Canvas画布状态示例
绘图状态进行压栈和出栈的方法如下:context.save(); // 将一个状态压入状态栈中.
context.restore(); // 将最前面的状态出栈,并设置到2d上下文中.
被保存在堆栈中后,您可以将多个状态推送到该堆栈上,然后将其弹出。这是一个代码示例:
示例HTML5 Canvas not supported
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle ="#66ff66";
context.strokeStyle="#990000";
context.lineWidth = 5;
context.fillRect (5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect (65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect (125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);
context.restore();
context.fillRect (185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);
context.restore();
context.fillRect (245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);
测试看看 ‹/›
这是在画布上绘制时上述代码的结果:HTML5 Canvas not supported
状态栈的用处
如果您更改画布合成模式或转换设置,并且需要在进行更改之前先返回到设置,则状态堆栈非常有用。通过保存和恢复构图模式或转换设置,可以确保正确重置了它。否则,要返回到之前的确切设置可能会有些困难。
2D上下文的状态有哪些?
所有2D上下文属性都是保存和还原状态的一部分。但是,在画布上绘制的却不是。这意味着,在还原状态时,您不会还原绘图区域本身。您仅还原2D上下文设置(属性值)。这些设置包括:fillStyle
font
globalAlpha
globalCompositionOperation
lineCap
lineJoin
lineWidth
miterLimit
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
strokeStyle
strokeStyle
textAlign
textBaseline
The clipping region
The transformation matrix (通过context.rotate()+ 旋转+平移context.setTransform())
此列表并不详尽。随着标准的发展,更多的属性可能成为2D上下文状态的一部分.
html5选择状态,HTML5 Canvas 状态相关推荐
- html5 选择列表,Html5添加基于列表的选择美化插件教程
一.使用方法 二.Html结构 多盟 安沃 KeyMob 广点通 有米 html php css javascript nodejs 三.初始化插件 $('.ui-choose').ui_choose ...
- html5画电池状态,HTML5的一个显示电池状态的API简介
这篇文章主要介绍了HTML5的一个显示电池状态的API简介,由Mozilla设计,具体的设备和浏览器支持情况还要通过检测才能确定,需要的朋友可以参考下 移动设备的份额在网络流量中在大量增长,其所贡献的 ...
- 开发者值得关注的HTML5新特性:Canvas
随着IE 10的即将发布正式版,标志者HTML5的时代已经越来离我们越来越近了,尽管HTML 5的最终标准草案还没最终敲定,但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善 ...
- html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆 发布时间:2021-07-08 16:32:10 来源:亿速云 阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
- HTML5的图像系统Canvas与SVG
在HTML5之前,没有标准的提供可供Javascript脚本调用的图像系统,以前的做法通常是通过Div来画点.线.矩形这种非常"笨"的办法来变相的绘图,虽然很"笨&quo ...
- 前端实现可绘制的canvas画布_前端图形学基础(五)——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门 前端图形学基础(二)--Canvas基础 前端图形学基础(三)--Canvas ...
- 在HTML5中如何利用Canvas处理并存储图片
HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C 写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了. canvas中如果想要处理 ...
- 前端:JS/38/canvas状态的保存和恢复(canvas常用状态大全),canvas画布中图像的变形
canvas状态的保存和恢复 Saving and restoring state 在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法. canvas.save() 保存画布(canva ...
- react动态改变选中不选中_reactjs – 如何避免使用重新选择来计算派生状态时React重新渲染...
我解决了我的问题,但我猜没有正确的答案,因为它真的取决于具体的情况.就我而言,我决定采用这种方法: 原始选择器处理得很好的挑战之一是最终信息是从以任意顺序传递的许多部分编译而来的.如果我决定逐步在Re ...
最新文章
- Linux下C++开发工具介绍
- 新开通博客园,纪念一下。
- 二分+最大化最小值 River Hopscotch POJ - 3258
- 使用java修改图片DPI
- 剑指Offer - 面试题59 - II. 队列的最大值(deque模拟单调栈)
- TensorFlow-JS教程 一、Node.js 设置
- 杂项:Java un
- Ubuntu与Windows时间不同步解决办法
- Appium appium 安装不了
- 报错:1130-host ... is not allowed to connect to this MySql server
- JDBC系列 之 存储过程
- 快商通知识图谱工程:让信息不再零碎,构建全行业的知识库 |百万人学AI评选
- 史上最全安装Maven教程
- LabView实验——温度检测系统(实验学习版)
- red5+obs+ffmpeg 推流实现单方直播 window +linux
- 5年Java面试阿里P6经验总结
- 【微信小程序模板】可以用微信小程序模板制作小程序吗?
- ida 动态调试so库 (连接夜神模拟器)
- 什么是GAN(生成对抗网络)?
- 浅谈简单线性回归(Simple linear regression)part3SEE,MSE,SSE的关系
热门文章
- ---单元数组-创建获取重塑单元数组----求解形如A(B)
- 贺利坚老师汇编课程25笔记:LOOP指令看CX
- 项目移植过程中报:“Project facet Java version 1.7 is not supported.” 错误
- 韩顺平循序渐进学java 第21.22.23.24讲 集合
- 可变字符串 插入,删除,替换,赋值
- 浅析foreach原理
- Ext中的get、getDom、getCmp、getBody、getDoc的区别
- .net中多控件共享事件处理程序的方法
- [转载] python enumerate函数 实例_python中使用enumerate函数遍历元素实例
- bzoj 2553 [BeiJing2011]禁忌——AC自动机+概率DP+矩阵