《HTML5 Canvas开发详解》——1.7 2D上下文及其当前状态
本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章,第1.7节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.7 2D上下文及其当前状态
通过调用Canvas对象的getContext()方法可以获得HTML5的2D上下文对象(Canvas RenderingContext2D对象)。所有操作都要通过该对象进行。CanvasRenderingContext2D对象包含了在画布上绘图所需的所有方法和属性。CanvasRenderingContext2D(简称上下文,后同)采用画布左上角为原点(0,0)的笛卡尔坐标系,坐标轴向右、向下为正方向。
然而,所有这些属性和方法都与当前状态关联使用。当前状态是一个必须掌握的概念。它可以帮助读者真正理解HTML5 Canvas的工作方式。当前状态实际上是一个绘制状态的堆栈,这些状态可以应用到整个画布。在画布上绘制时将操作这些状态。主要包括以下状态。
- 变换矩阵:缩放、旋转、变换以及平移的方法。
- 裁切区域:通过clip()方法创建。
- 上下文属性:包括strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,line,Join,miterLimit,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,global,CompositeOperation,font,textAlign以及textBaseline。
不必担心,虽然现在读者还不熟悉这些属性,后面3章将深入讨论这些属性。
读者是否还记得本章前面讨论的即时模式与保留模式?Canvas是一个即时模式的绘图界面,这就意味着如果什么东西发生了变化就需要即时重新绘制。这样做有以下好处:例如,全局属性很容易将效果应用到整个屏幕。一旦读者想好了,每次重新绘制屏幕的动作都有一个直接并且简单的画布绘制更新过程。
另一方面,保留模式采用一个绘制界面储存一组对象,并通过一个显示列表来操作。Flash和Silverlight就是使用这种模式。如果应用程序依赖多个拥有独立状态的对象,使用保留模式创建应用程序会很有用。许多能够充分利用画布功能的应用程序,如游戏、活动、动画都是相同的。这些程序通常很容易在保留模式的绘图界面下进行编码,尤其对于初学者来说。
这里面临的挑战是,既要利用即时模式绘图界面的优势,同时又要为代码增加更多的功能。以使程序就像工作在保留模式下一样。本书将讨论改善即时模式操作方式的策略,以及如何通过代码使其很容易操作。
《HTML5 Canvas开发详解》——1.7 2D上下文及其当前状态相关推荐
- 《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 《HTML5 canvas开发详解(第2版)》——1.3 本书使用的基础HTML页面
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.3节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- 《HTML5 Canvas开发详解》——导读
https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" > 前言 HTML5 Canvas为开发 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- 【OpenCV 4开发详解】点集拟合
本文首发于"小白学视觉"微信公众号,欢迎关注公众号 本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
- 【OpenCV 4开发详解】轮廓外接多边形
本文首发于"小白学视觉"微信公众号,欢迎关注公众号 本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
- 【OpenCV 4开发详解】轮廓面积与长度
本文首发于"小白学视觉"微信公众号,欢迎关注公众号 本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
最新文章
- KRIA SOM,赛灵思自适应计算最近一发“王炸”!
- python文本操作
- 注释的编写方式:写明白来龙去脉提高代码产出率
- SpringBoot初步入门
- AI:恐怖谷理论的陷阱
- 我在STM32单片机上跑神经网络算法
- Android中获取应用程序(包)的信息-----PackageManager的使用(一)
- java评论回复功能例子_Java实现评论回复功能的完整步骤
- 如何让cloudflare缓存html,wordpress博客使用CloudFlare的页面规则缓存设置教程
- 怎样增加phpmyadmin导入文件上限
- 彻底理解Java的Future模式
- python_类装饰器
- lcd开机流程图_LCD1602程序代码及显示流程图.doc
- 33种著名汽车标志及来历
- 金钏跳井,凸显贾府主子冷血,下人们离心离德是必然。
- 陈睿:B站用户用创作展示传统文化之美
- Win10 设备管理器一个USB设备描述符请求失败解决方法
- 计算机函数LEN的意思,python的len函数什么意思
- 微生物组β-多样性——PCoA分析及可视化
- Linux 的常用系统及网络命令