请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas旋转和缩放

2013-12-15 18:33| 发布者: admin| 查看: 1598| 评论: 0

摘要: Canvas旋转在实际开发中,往往需要从多个角度旋转一个元素,使之呈现另外一种状态。接下来我们要熟悉的就是rotate(angle)方法,angle是旋转的角度,旋转的中心是Canvas坐标系统原点。最关键的是,我们可以通过transl ...
Canvas旋转
在实际开发中,往往需要从多个角度旋转一个元素,使之呈现另外一种状态。接下来我们要熟悉的就是rotate(angle)方法,angle是旋转的角度,旋转的中心是Canvas坐标系统原点。

最关键的是,我们可以通过translate()来移动Canvas的坐标,使旋转变得自然美观。
旋转角度为正时是逆时针方向,为负时是顺时针方向。示例代码如下:
var degree=0; //初始化角度值
degree++; //角度自加(此代码在动画中才有用)
ctx.rotate(degree*Math.PI/180); //旋转其元素的角度

Canvas缩放
缩放也是绘图操作中常用的一种,主要功能是将元素按一定的比例放大或缩小。scale()就是完成缩放操作使用的方法。值得注意的是,scale(x, y) 中的x是水平方向的缩放比例,y是垂直方向的缩放比例,x和y必须都为正数。由于x和y可以不相等,因此,在缩放过程中,也会出现变形或拉伸的现象。
scale()方法内容不多,本处只给出一行示例代码即可说明:
ctx.scale(2,2); //将元素放大2倍



鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-12-11 10:34 , Processed in 0.128873 second(s), 29 queries .

返回顶部