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. XMU C语言程序设计实践（3）

    问题描述: 以一个n的长方阵表示迷宫,0和1分别表示迷宫中的通路和障碍,设计一个程序,对任意设定的迷宫,求出一条从入口到出口的通路,或得出没有通路的结论. 对于本问题需用栈实现“穷举求解”算法,即:从 ...

  2. TCO 2016 Round 1B

    problem 250 Problem Statement Vasa likes to construct sequences of numbers. If you tell him a positi ...

  3. jconsole工具检测堆内存变化的使用

    jconsole将Java写的程序检测. 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能分析器,可以从命令行或在 GUI shell 中运行.您可以轻松地使 ...

  4. html5--6-2 CSS语法

    html5--6-2 CSS语法 实例 学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表 创建一个外部样式表 在head中使用link元 ...

  5. Fleck websocket官方事例

    Fleck websocket官方事例 server: using Fleck;using System;using System.Collections.Generic;using System.L ...

  6. 【Codeforces 947A】 Primal Sport

    [题目链接] 点击打开链接 [算法] 不难看出,x1的范围是[x2-P(x2)+1,x2],x0的范围是[x1-P(x1)+1,x1] 我们可以先做一遍线性筛,然后暴力就可以了 [代码] #inclu ...

  7. 023--python os、sys、json、pickle、xml模块

    一.os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 >>> os.getcwd() 'C:\\Python36' os.chdir(&quo ...

  8. linux C之access函数（转载）

    转自:http://blog.sina.com.cn/s/blog_6a1837e90100uh5d.html access():判断是否具有存取文件的权限 相关函数    stat,open,chm ...

  9. E20170507-ts

    prompt  n. 提示; 提示符 object    n. 物体; 目标; 宾语; asterisk  * n. 星号,星状物; Ampersand   & Slash   n. 斜线; ...

  10. Codeforces703B Mishka and trip

    题意: 就是有n个点,本来相邻点之间就有一条边,1和n之间也有一条,然后给你几个特殊点,说这些特殊点和其他所有点都连起来了,然后算一个所有边的权值和,每条边的权值等于两个点的c相乘. 思路: 水题啊- ...