HTML5-Canvas 图形变换+状态保存
2016-07-12 14:18
302 查看
1. 图形变换
canvas是基于状态绘制图形的。故此一般情况下,canvas的绘制的图形路径和状态时分离的。
在填充或绘制之前可以调用一些状态或者图形变换的来设置当前绘制图形的状态。
这里所说的图形变换大致指的就是:
1> 位移 translate(x,y) : 将canvas画布进行位移显示。将坐标原点移动到(x,y)的位置,translate将原点移动之后,如果再次调用translate进行移动,那么会依照上一个translate移动之后作为原点参考。
2> 旋转 rotate(deg) : 将canvas画布进行旋转显示
3> 缩放 scale(sx,sy) : 将canvas画布进行缩放显示
2.canvas状态的保存和恢复
save()函数:保存当前的图形状态
restore()函数:返回save()函数保存时候的状态
3. 变换矩阵
transform(a,b,c,d,e,f)状态会叠加。
setTransform(a,b,c,d,e,f)将变换矩阵首先变成单位矩阵,然后在对传入的参数进行图形变换,会忽略之前所有的transform操作。
canvas是基于状态绘制图形的。故此一般情况下,canvas的绘制的图形路径和状态时分离的。
function drawShape(ctx){ // 绘制路径 shapePath(ctx); // 进行填充或者绘制 // ... } function shapePath(ctx){ ctx.beginPath(); // 图形路径 // ... ctx.closePath(); }
在填充或绘制之前可以调用一些状态或者图形变换的来设置当前绘制图形的状态。
这里所说的图形变换大致指的就是:
1> 位移 translate(x,y) : 将canvas画布进行位移显示。将坐标原点移动到(x,y)的位置,translate将原点移动之后,如果再次调用translate进行移动,那么会依照上一个translate移动之后作为原点参考。
2> 旋转 rotate(deg) : 将canvas画布进行旋转显示
3> 缩放 scale(sx,sy) : 将canvas画布进行缩放显示
2.canvas状态的保存和恢复
save()函数:保存当前的图形状态
restore()函数:返回save()函数保存时候的状态
function drawShape(ctx){ ctx.save(); // 状态保存 // 绘制路径 shapePath(ctx); // 进行填充或者绘制 // ... ctx.restore(); // 状态恢复 } function shapePath(ctx){ ctx.beginPath(); // 图形路径 // ... ctx.closePath(); }
3. 变换矩阵
transform(a,b,c,d,e,f)状态会叠加。
setTransform(a,b,c,d,e,f)将变换矩阵首先变成单位矩阵,然后在对传入的参数进行图形变换,会忽略之前所有的transform操作。
相关文章推荐
- 【分享】WeX5的正确打开方式(7)——数据组件详解
- web设计之:崛起中的九大HTML5开发工具
- HTML5-Canvas 绘制线条的深入认识
- 你必须知道的html5的基本特征和用法--基础必会
- HTML5-Canvas 初认识
- 如何实现一个原质化菜单项或按钮HTML5动画效果
- H5
- H5图片预览关闭的优化
- 二胎上位之路:html5报表和原生报表的笑尿撕逼
- 关于HTML5语义标签的实践(blog页面)
- HTML5 audio标签 打造属于自己的音乐播放器
- 二胎上位之路:html5报表和原生报表的笑尿撕逼
- 二胎上位之路:html5报表和原生报表的笑尿撕逼
- Html5实现手机九宫格密码解锁功能
- 纯HTML5 Canvas实现的饼图
- HTML5开发工具介绍
- HTML5的浏览器支持方案
- html5画布
- html5语义化标签
- HTML5结构