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);

例子：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>马尾图案</title>

</head>

<body>

<div class="container">

<canvas id="myCanvas" width="300" height="300" >

    Your browser does not support the canvas element.

</canvas>

</div>

<script>

  window.onload=function(){

      var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      context.translate(160,30);//平移

      context.fillStyle='rgba(120,93,222,0.25)';//填充

      context.fillRect(0,0,100,50)

      for(var i=0;i<50;i++){

          context.translate(25,25);//平移

          context.scale(0.95,0.95);//扩大。所有的方法包括扩大，他们的对象都是针对后面要画出的图形，而非canvas画布。因此后面的fillRecr函数画的矩形的宽仍然是100，高仍然是50.这里相当于把这个矩形扩大为原来的0.95倍。

          context.rotate(Math.PI/10);//旋转。

          context.fillRect(0,0,100,50);//画矩形 这里仍然是画（0,0,100,50）

      }

  }

</script>

</body>

</html>

马尾图案之canvas的translate、scale、rotate的方法详解的更多相关文章

  1. Android为TV端助力 转载：Android绘图Canvas十八般武器之Shader详解及实战篇(下)

    LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...

  2. Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(上)

    前言 Android中绘图离不开的就是Canvas了,Canvas是一个庞大的知识体系,有Java层的,也有jni层深入到Framework.Canvas有许多的知识内容,构建了一个武器库一般,所谓十 ...

  3. android canvas中rotate()和translate()两个方法详解

    rotate()和translate() 1.看到这个题目的时候,有人会觉得这不就是一个对画布的旋转和平移的嘛,但是其中的细节的地方还是需要深究一下的. 例如:有个需求将TextView的文字竖直显示 ...

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

    首先,当我们在页面上初始化canvas时,相当于在上面放了一块画布,这块画布我们可以理解为上面有一个坐标系(如下图),左上角是原点,往右是X轴的正方向,往下是Y轴的正方向,我们在画布上绘制的内容都是基 ...

  5. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  6. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  7. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  8. html5的canvas绘制线条，moveTo和lineTo详解

    今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...

  9. 闭包在python中的应用，translate和maketrans方法详解

    python对字符串的处理是比较高效的,方法很多.maketrans和translate两个方法被应用的很多,但是具体怎么用常常想不起来. 让我们先回顾下这两个方法吧: 1.s.translate(t ...

随机推荐

  1. 并不对劲的复健训练-bzoj5250:loj2473:p4365:[九省联考2018]秘密袭击

    题目大意 有一棵\(n\)(\(n\leq 1666\))个点的树,有点权\(d_i\),点权最大值为\(w\)(\(w\leq 1666\)).给出\(k\)(\(k\leq n\)),定义一个选择 ...

  2. Datetime 在C#中的用法 获取当前时间的各种格式

    DateTime 获得当前系统时间: DateTime dt = DateTime.Now; Environment.TickCount可以得到“系统启动到现在”的毫秒值 DateTime now = ...

  3. JS基础_基本数据类型和引用数据类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. webpack中使用html-webpack-plugin生成HTML文件并主动插入css和js引入标签

    html-webpack-plugin clean-webpack-plugin 一.html-webpack-plugin 由于打包时生成的css样式文件和js脚本文件会采用hash值作为文件命名的 ...

  5. OGG学习笔记01

    OGG学习笔记01-基础概述OGG(Oracle Golden Gate),最近几年在数据同步.容灾领域特别火,甚至比Oracle自己的原生产品DataGuard还要风光,主要是因为其跨平台.跨数据库 ...

  6. GitLab 部署及管理员账号初始化

    Linux系统搭建GitLab---阿里云Centos7搭建Gitlab踩坑一.简介GitLab,是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过We ...

  7. spring framework体系结构及模块jar依赖关系

    本文对于Spring的JAR包使用和配置,结合网友材料以spring 4.3.6.RELEASE版本为例,介绍spring框架结构和各模块对应JAR包以及模块间JAR依赖关系. 注:不同版本JAR包依 ...

  8. 第十章、logging模块

    目录 第十章.logging模块 一.logging模块及日志框架 第十章.logging模块 一.logging模块及日志框架 导入方式 import logging 作用 写日志 模块功能 # V ...

  9. Oracle 触发器学习笔记一

    触发器名:触发器对象的名称.由于触发器是数据库自动执行的,因此该名称只是一个名称,没有实质的用途.触发时间:指明触发器何时执行,该值可取:before:表示在数据库动作之前触发器执行;after:表示 ...

  10. 6.JVM技术_java内存模型

    1.java内存模型图解 Java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区.这些区域有各自的用途,以及创建和销毁的 时间,有的区域随着虚拟机进程的启动而存在,有的区 ...