canvas 平移&缩放
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 平移&缩放的更多相关文章
- 【OpenGL(SharpGL)】支持任意相机可平移缩放的轨迹球实现
[OpenGL(SharpGL)]支持任意相机可平移缩放的轨迹球 (本文PDF版在这里.) 在3D程序中,轨迹球(ArcBall)可以让你只用鼠标来控制模型(旋转),便于观察.在这里(http://w ...
- WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示
原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...
- WPF中的平移缩放和矩阵变换（TranslateTransform、ScaleTransform、MatrixTransform）
在WPF中的平移缩放都是通过RenderTransform这个类来实现这些效果的,在这个类中,除了平移和缩放还有旋转.扭曲变换.矩阵变换.这些都差不多的,都是坐标的变换. 这里我就先简单弄个平移和缩放 ...
- 一步一步手写GIS开源项目-（2）地图平移缩放实现
系列文章目录 一步一步手写GIS开源项目-(1)500行代码实现基础GIS展示功能 一步一步手写GIS开源项目-(2)地图平移缩放实现 项目github地址:https://github.com/Hu ...
- 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性
1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...
- android 图片的平移,缩放和旋转
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- OpenGL中旋转平移缩放等变换的顺序对模型的影响
l 前提: 0x01. 假设绘制顶点的语句为Draw Array,变换的语句(旋转.平移.缩放)为M,而 M0; M1; M2; Draw Array; 则称对Array先进行M2再进行M1.M0 0 ...
- HDU 4087 三维上的平移缩放旋转矩阵变化
题目大意: 就是根据它给的程序的要求,不断平移,缩放,旋转三维的点,最后计算出点的位置 这里主要是要列出三种转换方式的齐次矩阵描述 平移translate tx ty tz1 0 0 00 1 0 0 ...
- html5 canvas旋转+缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CH 5302 金字塔（区间DP）
CH 5302 金字塔 \(solution:\) 很神奇的一道题目,当时看到还以为是一道字符串求回文子串的题目.但是数据范围很小,而且只知道回文串也不好做.但是我们观察可得,如果是深度搜索便利,那么 ...
- UDP 端到端
创建发送端 1.建立DatagramSocket对象,该端点建立,系统会随机分配一个端口,如果不想随机分配,可手动指定. 2.将数据进行packet封装,必须指定目的地址和端口. 3.通过socket ...
- Android驱动开发之earlysuspend睡眠模式--实现代码【转】
本文转载自:http://blog.csdn.net/MyArrow/article/details/8136018 (1)添加头文件: #include <linux/earlysuspend ...
- HDU2089 不要62 —— 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 不要62 Time Limit: 1000/1000 MS (Java/Others) M ...
- PHP——巧用PHP函数array_merge()合并数组
前言 返回联系人列表,包含所有的字母,之前返回的是存在这个联系人才会返回对应的大写字母,后面更改了要求要返回所有的字母从A-Z.PHP内置的一些函数活用起来,真的很省劲! 步骤 一般这时候大家可能直接 ...
- linux初级学习笔记九：linux I/O管理，重定向及管道！(视频序号：04_3)
本节学习的命令:tr,tee,wc 本节学习的技能: 计算机的组成 I/O管理及重定向 管道的使用 知识点九:管理及IO重定向(4_3) 计算机组成: 运算器.控制器: CPU 存储器:RAM ...
- Javascript中两种最通用的定义类的方法
在Javascript中,一切都是对象,包括函数.在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义.但Javascript中提供了一种折中的方案:把对象定 ...
- kafka 查询 SQL Query
. SELECT COUNT(*) FROM wiseweb_crawler_foreignmedias WHERE site_id= AND (gathertime BETWEEN '2017-05 ...
- codeforces 691F F. Couple Cover(组合计数)
题目链接: F. Couple Cover time limit per test 3 seconds memory limit per test 512 megabytes input standa ...
- JSON --- 一种轻量级的数据交换格式
目录 1. 语法 2. 解析与序列化 JSON.stringify( jsData[, filter, indent] ) JSON.parse( jsonData[, reduction]) JSO ...