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. 有奖试读&amp;征文——我们在互联网上奋斗的故事 获奖名单发布

    互联网是一个年轻的行业,同一时候也是一个推陈出新.不断进化的行业. 中国互联网行业在近期的十五年里.以如何的方式在"进化".我相信非常多奋斗在互联网战线上的你们最深有感触.读一读& ...

  2. 利用CoreTelephony获取用户当前网络状态(判断2G,3G,4G)

    前言: 在项目开发当中,往往需要利用网络.而用户的网络环境也需要我们开发者去注意,根据不同的网络状态作相应的优化,以提升用户体验. 但通常我们只会判断用户是在WIFI还是移动数据,而实际上,移动数据也 ...

  3. POJ1459 Power Network —— 最大流

    题目链接:https://vjudge.net/problem/POJ-1459 Power Network Time Limit: 2000MS   Memory Limit: 32768K Tot ...

  4. 安装Sublime Text 3插件的方法（转自Rising的博文）

    安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧,谢谢! 直接安装 安装Sublime text 2插件很方便,可 ...

  5. web自动化测试的自身特点

    1.web页面是出现的元素可能具有不确定性 2.不同操作系统上不同web浏览器之间的兼容性 3.web应用的高并发性和容错性 4.移动设备上web客户端兼容性,旋转下和各种触摸特性

  6. [ZJOI 2008] 骑士

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1040 [算法] 首先 , 题目中互相讨厌的关系构成了一棵基环森林 用拓扑排序找出环 ...

  7. webpack 工作方式

    把你的项目当做一个整体,通过一个给定的主文件(如index.js),webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个或多个 浏览器可识别额javas ...

  8. 877C

    构造 想了好长时间... 答案是n+n/2 我们这么想,先把偶数位置炸一遍,所有坦克都在奇数位置,然后再把奇数炸一遍,坦克都到偶数去了,然后再炸一次偶数就都炸掉了... 好巧妙啊 奇偶讨论很重要 #i ...

  9. list转json的一些问题

    利用JSONArray转换list 定义的model: package com.yds.model; import java.util.Date; public class DeviceHistory ...

  10. 【199】ArcGIS 添加自定义工具到工具箱

    点击工具栏最右边的三角块,弹出菜单,点击“Customize”. 切换到“Command”,在搜索框中输入“idw”查找相应工具,然后将工具通过鼠标左键拖拽到工具栏中. 在工具上右键修改工具的显示图片 ...