canvas的translate、scale、rotate等方法

1.translate(x,y):平移,将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0).

例子:画布原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴、y轴移动10,则原点变为(11,11)。
2.scale(x,y):扩大。x为水平方向的放大倍数,y为竖直方向的放大倍数。
3.rotate(angel):旋转.angle指旋转的角度,顺时针旋转。 4.transform():切变。所谓切变,其实就是把图像的顶部或底部推到一边。
第一条很好理解,就是要明确顺序。

canvas的转换不是针对整个canvas的,而是针对调用转换方法之后绘制的shapes或 paths。如下:

context.rotate(45 * Math.PI/180);

context.fillRect(50, 50, 50, 50);

顺序很重要,反了就没有旋转的效果了。

第二条,转换的时候,需要把转换的中心点移到shape的自身的中心,不然的话,请看下面这个例子(浅蓝色部分表示canvas):

context.fillRect(50, 50, 50, 50);

这是没有转换的效果,接着来看旋转45°的效果:

context.rotate(45 * Math.PI/180);

context.fillRect(50, 50, 50, 50);

可以看出,旋转的中心是canvas的左上角(scale()的中心也是左上角),也就是点(0,0),但是通常我们需要的是围绕自己的中心进行旋转,所以就有了第二条。

==========================================================================================
下面说说怎么移动中心点

假如fillRect(50, 50, 50, 50),那么这个矩形的中心点是(x + width/2, y +height/2),即(75, 75)。

上面刚说了,旋转的中心是canvas的左上角,我们要做的就是把(0, 0)移到(75, 75)的位置。

canvas的translate()方法可以使坐标系统的原点向上下左右移动。这正是我们需要的!

context.translate(x + width/2, y +height/2);

好了,中心点处理完了,还记得上面的第一条不,切记顺序,现在该画矩形了,fillRect()的参数 x 和 y现在是什么呢?

调用translate()之后,整个坐标系统都平移了,所以我们之前的fillRect(50, 50, 50,50),矩形的左上角不再是(50, 50)了,而是(-0.5 * width, -0.5 * height);

context.fillRect(-0.5 * width, -0.5 *height);

==========================================================================================

再说下scale(),如果我们需要放大1倍,即 scale(2, 2);刚才也说了,缩放的中心点默认也是canvas的左上角,所以我们还是要进行坐标平移:

context.translate(x + width/2, y +height/2);

context.scale(2, 2);

接着画矩形,这里很容易出现幻觉,好像要画一个放大1倍后的矩形,其实不用的,该怎么画还是怎么画:

context.fillRect(50, 50, 50, 50);

-----------------------------------------------------------

对canvas的translate()方法的理解

  • canvas.save();//锁画布(为了保存之前的画布状态)
  • canvas.translate(10, 10);//把当前画布的原点移到(10,10),后面的操作都以(10,10)作为参照点,默认原点为(0,0)
  • drawScene(canvas);
  • canvas.restore();//把当前画布返回(调整)到上一个save()状态之前
  • canvas.save();//锁画布(为了保存之前的画布状态)
  • canvas.translate(160, 10);//把当前画布的原点移到(160,10),后面的操作都以(160,10)作为参照点,
  • canvas.clipRect(10, 10, 90, 90);//这里的真实坐标为左上(170,170)、右下(250,250)
  • canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
  • drawScene(canvas);
  • canvas.restore();
时间: 2024-10-11 09:01:55

canvas的translate、scale、rotate等方法的相关文章

HTML canvas中translate()与rotate()的理解

首先,当我们在页面上初始化canvas时,相当于在上面放了一块画布,这块画布我们可以理解为上面有一个坐标系(如下图),左上角是原点,往右是X轴的正方向,往下是Y轴的正方向,我们在画布上绘制的内容都是基于这个坐标系完成,但是有时候我们需要对绘制的内容进行调整,例如将上面的一个图形旋转某个角度,或者在画布正中心画一个图形,我们就可以通过translate和rotate将坐标系进行移动之后再进行绘制. 还有,rotate的旋转是以原点为基准进行旋转,,这一点很重要 功能与参数介绍 函数 参数 描述 t

马尾图案之canvas的translate、scale、rotate的方法详解

1.translate(x,y):平移 将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0).  例子:画布原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴.y轴移动10,则原点变为(11,11).2.scale(x,y):扩大 x为水平方向的放大倍数,y为竖直方向的放大倍数.3.rotate(angel):旋转 angle指旋转的角度,顺时针旋转.4.transform():切变 所谓切变,其实就是把图像的顶部

自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法

前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随时沟通的时候,总会发来一条条的鼓励短信,让我不自主的开始内疚.哎,多么可爱的用户,多么无耐的现实. 相关文章: <Android自定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article/details/50995268 一.概述 Android

Android自定义控件:动画类----alpha、scale、translate、rotate、set的xml属性及用法

一.概述 Android的animation由四种类型组成:C.scale.translate.rotate,对应android官方文档地址:<Animation Resources> 动画在XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 动作定义文件应该存放在res/anim文件夹下,访问时采用R.anim.XXX.xml的方式,位置如图: 二.下面我们逐个讲讲每个标签的属性

translate()函数的使用方法

以下实例展示了 translate()函数的使用方法: #!/usr/bin/pythonfrom string import maketrans # 引用 maketrans 函数. intab = "aeiou" outtab = "12345" trantab = maketrans(intab, outtab) str = "this is string example....wow!!!";print str.translate(tra

IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转)

IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转) IE下使用excanvas.js之后,动态创建的canvas不支持getContext的解决方法 引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法创建的就不行了 var canvas=document.createElement(”canvas”); if(canvas.getContext){ alert(”support

translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>translate移动坐标,rotate实现2D自动

Canvas之translate、scale、rotate、skew方法讲解!

尊重原创,欢迎转载,转载请注明: FROM  GA_studio   http://blog.csdn.net/tianjian4592 前面说Canvas大致可以分为三类: 1. save.restore 等与层的保存和回滚相关的方法: 2. scale.rotate.clipXXX 等对画布进行操作的方法: 3. drawXXX 等一系列绘画相关的方法: 前面主要讲了drawBitmap方法,并举了一个星球浮动的栗子,在那个例子中,星球有大有小,需要移动,有时候可能需求上还需要旋转或错切,有

CSS3 transform 属性详解(skew, rotate, translate, scale)

写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有必要写个博文,帮助那些不懂的人,让他们看了此文就懂. 进入正题: 先说明下,电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的.如下图: 图上的盒子就是代表我们的电脑屏幕,原点就是屏幕的左上角,竖直向下为X轴正方向,水平向右为Y轴正方向. 1.倾斜skew 先看图 每个图下方都有skew的参数.粗的红色的线