《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就是使用这种模式。如果应用程序依赖多个拥有独立状态的对象,使用保留模式创建应用程序会很有用。许多能够充分利用画布功能的应用程序,如游戏、活动、动画都是相同的。这些程序通常很容易在保留模式的绘图界面下进行编码,尤其对于初学者来说。

这里面临的挑战是,既要利用即时模式绘图界面的优势,同时又要为代码增加更多的功能。以使程序就像工作在保留模式下一样。本书将讨论改善即时模式操作方式的策略,以及如何通过代码使其很容易操作。

相关文章
|
10天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
2天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
12 1
HTML5 Canvas发光Loading源码
|
3天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
10 1
Canvas实现超酷Loading动画HTML代码
|
6天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
11天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
11天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
11天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
941 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1296 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.2 图形的渲染
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.2节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1203 0