制作师专栏

HTML5 canvas变换

    现在我们探讨一下在canvas上绘制图像的另一种方式一使用变换(transformationh接下 来的代码清单显示结果跟上面是一样的,只是绘制对角线的代码不一样。这个简单示例可能会让 你误认为使用变换增加了不必要的复杂性。事实并非如此,其实变换是实现复杂canvas操作的 最好方式。在后面的示例中将会看到,我们使用了大《:的变换,而这对熟悉HTML5 Canvas API 的复杂功能是至关重要的。


    也许了解变换最简单的方法(至少这种方法不涉及大量的数学公式,也不需手足并用地去解 释)就是把它当成是介于开发人员发出的指令和canvas显示结果之间的一个修正层(modificatkm layer)0不管在开发中是否使用变换,修正层始终都是存在的。


    修正一在绘制系统中的说法是变换——在应用的时候可以被顺序应用、组合或者随意修 改。每个绘制操作的结果显示在canvas上之前都要经过修正层去做修正〃虽然这么做增加了额 外的复杂性,但却为绘制系统添加了更为强大的功能,可以像目前主流图像编辑工具那样支持实 时图像处理,所以API中这部分内容的复杂性是必要的。


    不在代码中调用变换函数并不意味着可以提升canvas的性能。canvas在执行的时候,变换 会被呈现引擎隐式调用,这与开发人员是否直接调用无关。在接触最基本的绘制操作之前,提前 了解系统背后的原理至关重要。


    关于可重用代码有一条重要的建议:一般绘制都应从原点(坐标系中的0,0点)开始,应用 变换(缩放、平移、旋转等),然后不断修改代码直至达到希望的效果。

0
选择一个心情
网站建设 网站制作 网页设计 网站建设公司 沈阳网站建设 沈阳网页设计 高端网站设计 沈阳网站制作公司 高端网站建设 沈阳网络公司 沈阳网站制作
沈阳易势科技有限公司 © 2006-2013 , All rights reserved. 辽B2-20150173-8号