首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 平面设计 > 图形图像 >

HTML5 绘制图形【四】

2012-09-09 
HTML5 绘制图形【4】绘制变形图形坐标变换绘制图形的时候,我们可能会想要旋转图形,或对图形使用变形处理,使

HTML5 绘制图形【4】
绘制变形图形坐标变换

绘制图形的时候,我们可能会想要旋转图形,或对图形使用变形处理,使用Canvas API的坐标轴变换处理功能,可以实现这种效果。

在计算机上绘制图形的时候,是以坐标单位为基准来进行图形绘制的。默认情况下,Canvas画布的最左上角对应于坐标轴原点(0, 0)。如果对这个坐标使用变换处理,就可以实现图形的变形处理了。对坐标的变换处理有三种方式:

平移

使用图形上下文对象的translate()方法移动坐标轴原点。该方法的定义如下:

context.setTransform(m11, m12, m21, m22, dx, dy);

该方法的参数及参数 用法与transform()相同,事实上,该方法的作用为将画布上的最左上角重置为坐标原点,当图形上下文创建完毕时将所创建的初始变换矩阵设置为当前变换矩阵,然后使用transform()方法。

热点排行