1.平移
canvas其实只是一个包装器，真正起着重要作用的部分是2D渲染上下文，这才是我们真正绘制图形的地方。
然而2D渲染上下文是一种基于屏幕的标准绘制平台。它采用屏幕的笛卡尔坐标系统，以左上角（0,0）坐标为原点。
向右移动时x的坐标值增加，向下移动时y的坐标值增加。
好了了解了坐标系统之后，咱们就可以尽情的移动处理图形的位置了！
平移，也就是参照2D渲染上下文的原点(0,0)，将图形从一个坐标点移动到另一个坐标点的过程！
使用方法：translate(x,y) 两个参数分别以原点为坐标 向左增加x个单位值，向下增加y个单位值。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title>变形</title>

    <script type="text/javascript">

        window.onload = function () {

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

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

            context.fillRect(150, 150, 100, 100);

            context.translate(150, 150);  //设置平移

            context.fillStyle = "rgb(255,0,0)";

            context.fillRect(150, 150, 100, 100);   //执行位移后，将原点坐标(150,150)分别加上150，即以坐标(300,300)为原点坐标绘制宽高为100单位的矩形。

            context.fillStyle = "rgb(0,255,255)";

            context.translate(150, 150);   //两次位移 相当于位移了300  还是以(300,300)为坐标进行绘制

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

        }

    </script>

</head>

<body>

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

        您的浏览器暂不支持画布！

    </canvas>

</body>

</html>

由此不难看出，canvas的绘图状态一旦设置，就会影响之后所有元素的绘制属性！
这是由于它们都是在2D渲染上下文中操作的，而不是只针对所绘制的图形。

2.缩放
使用方法：scale(x,y);
调整元素在2D上下文中的尺寸，与平移的区别在于(x,y)参数是缩放倍数，而不是像素值。
单独使用该方法，会让之后所有元素都跟着放大相应的倍数，这肯定不是你所想要的！
因此我们可以在缩放前，先调用save()方法，保存一下绘图状态，等当前元素执行了缩放之后，
我们再调用一下restore()方法，这样就可以恢复到之前的绘图状态了，从而实现只对当前元素进行缩放的操作！

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title>变形</title>

    <script type="text/javascript">

        window.onload = function () {

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

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

            context.save();  //先保存下绘图状态

            context.translate(150, 150);  //进行位移操作

            context.scale(2, 2);  //将绘制元素放大2倍

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

            context.restore();  //恢复绘图状态

            context.fillRect(0, 0, 100, 100);  //此时，绘制的矩形既没位移，又没放大！

        }

    </script>

</head>

<body>

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

        您的浏览器暂不支持画布！

    </canvas>

</body>

</html>

交流群：225443677

canvas 平移&缩放的更多相关文章

  1. 【OpenGL(SharpGL)】支持任意相机可平移缩放的轨迹球实现

    [OpenGL(SharpGL)]支持任意相机可平移缩放的轨迹球 (本文PDF版在这里.) 在3D程序中,轨迹球(ArcBall)可以让你只用鼠标来控制模型(旋转),便于观察.在这里(http://w ...

  2. WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

    原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...

  3. WPF中的平移缩放和矩阵变换（TranslateTransform、ScaleTransform、MatrixTransform）

    在WPF中的平移缩放都是通过RenderTransform这个类来实现这些效果的,在这个类中,除了平移和缩放还有旋转.扭曲变换.矩阵变换.这些都差不多的,都是坐标的变换. 这里我就先简单弄个平移和缩放 ...

  4. 一步一步手写GIS开源项目-（2）地图平移缩放实现

    系列文章目录 一步一步手写GIS开源项目-(1)500行代码实现基础GIS展示功能 一步一步手写GIS开源项目-(2)地图平移缩放实现 项目github地址:https://github.com/Hu ...

  5. 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

  6. android 图片的平移,缩放和旋转

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  7. OpenGL中旋转平移缩放等变换的顺序对模型的影响

    l 前提: 0x01. 假设绘制顶点的语句为Draw Array,变换的语句(旋转.平移.缩放)为M,而 M0; M1; M2; Draw Array; 则称对Array先进行M2再进行M1.M0 0 ...

  8. HDU 4087 三维上的平移缩放旋转矩阵变化

    题目大意: 就是根据它给的程序的要求,不断平移,缩放,旋转三维的点,最后计算出点的位置 这里主要是要列出三种转换方式的齐次矩阵描述 平移translate tx ty tz1 0 0 00 1 0 0 ...

  9. html5 canvas旋转+缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. eclipse 修改代码后无法生效，需要clean后才能生效的解决办法

    勾选project-->Bulid Automatically选项(自动编译)

  2. VK Cup 2016 - Round 1 (Div. 2 Edition) C. Bear and Forgotten Tree 3

    C. Bear and Forgotten Tree 3 time limit per test 2 seconds memory limit per test 256 megabytes input ...

  3. 内核添加dts后，device和device_driver的match匹配的变动：通过compatible属性进行匹配【转】

    本文转载自:http://blog.csdn.net/ruanjianruanjianruan/article/details/61622053 内核添加dts后,device和device_driv ...

  4. 数据结构之 图论---基于邻接矩阵的广度优先搜索遍历（输出bfs遍历序列）

    数据结构实验图论一:基于邻接矩阵的广度优先搜索遍历 Time Limit: 1000MS Memory limit: 65536K 题目描述 给定一个无向连通图,顶点编号从0到n-1,用广度优先搜索( ...

  5. 代码块、继承、this、super、final(java基础知识八)

    1.代码块的概述和分类 * A:代码块概述 * 在Java中,使用{}括起来的代码被称为代码块.* B:代码块分类 * 根据其位置和声明的不同,可以分为局部代码块,构造代码块,静态代码块,同步代码块( ...

  6. Python里的一些注释规范

    写代码注释是一件很重要的事情,如果你写的一段函数给别人调用那么往往都需要配上一些基本的注释.写好代码可以让别人容易阅读你的代码.试想一 下:如果你在github上面找到一段你想要的代码,这段代码有20 ...

  7. maven 简单入门教学实战手册

    Maven那点事儿(Eclipse版)   前言: 由于最近工作学习,总是能碰到Maven的源码.虽然平时工作并不使用Maven,但是为了学习一些源码,还是必须要了解下.这篇文章不是一个全面的Mave ...

  8. HBase源码分析：HTable put过程

    HBase版本:0.94.15-cdh4.7.0 在 HBase中,大部分的操作都是在RegionServer完成的,Client端想要插入.删除.查询数据都需要先找到相应的 RegionServer ...

  9. Synchronized之三：Synchronized与线程中断、线程wait

    线程中断 见<Thread之八:interrupt中断> 正如中断二字所表达的意义,在线程运行(run方法)中间打断它,在Java中,提供了以下3个有关线程中断的方法 //中断线程(实例方 ...

  10. JavaScript-Tool：wdtree

    ylbtech-JavaScript-Tool:wdtree 1.返回顶部 1. 插件描述:wdTree是一个轻量级jQuery插件用于创建一个带有嵌套Check Boxe的树形控件. wdTree是 ...