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/ ...
随机推荐
- poj 2559 Largest Rectangle in a Histogram 栈
// poj 2559 Largest Rectangle in a Histogram 栈 // // n个矩形排在一块,不同的高度,让你求最大的矩形的面积(矩形紧挨在一起) // // 这道题用的 ...
- iOS 开发用到的常用工具
如果你去到一位熟练的木匠的工作室,你总是能发现他/她有一堆工具来完成不同的任务. 软件开发同样如此.你可以从软件开发者如何使用工具中看出他水准如何.有经验的开发者精于使用工具.对你目前所使用的工具不断 ...
- iOS UIView控件的常用属性和方法的总结
一 UIVIew 常见属性1.frame 位置和尺寸(以父控件的左上角为原点(0,0))2.center 中点 (以父控件的左上角为原点(0,0))3.bounds 位置和尺寸(以自己的左上角为原点 ...
- UVA10480 Sabotage —— 最小割最大流
题目链接:https://vjudge.net/problem/UVA-10480 题解: 实际就是求最小割集. 1.什么是网络流图的“割”?答:一个边的集合,使得网络流图删除这些边之后,点被分成两部 ...
- 利用JS判断当前来路域名并跳转到指定页面
某网站绑定了多个域名,默认情况下访问这些域名的时候是指向网站的首页,也就是访问不同域名时看到的页面是一样的,现在需要访问不同域名时显示不同页面. 一般情况下,可以用子站绑定域名的方法来实现,访问不同的 ...
- ODC(Orthogonal Defect Classification)简介——正交缺陷分类法
Defect分析是软件开发和测试中一个重要的环节,ODC介绍了一种不同于大家常用的非常有效的defect分类及分析方法.这篇文章简单的向大家介绍了什么是ODC,以及如何在项目和产品开发中使用ODC来改 ...
- impdp+network link 跳过expdp直接导入目标库
impdp命令特殊用途,可以将数据库的一个用户迁移到另一台机器上的数据库的用户中.如果目标用户不存在,还可以对应的创建该用户. 快速的把A库上的用户迁移到B库上. 下面就来看一下命令格式: B库下执 ...
- BZOJ_2017_[Usaco2009 Nov]硬币游戏_博弈论+DP
BZOJ_2017_[Usaco2009 Nov]硬币游戏_博弈论+DP Description 农夫约翰的奶牛喜欢玩硬币游戏,因此他发明了一种称为“Xoinc”的两人硬币游戏. 初始时,一个有N(5 ...
- Watir 能够为你做什么？
为了提高自己的工作效率,我曾经对Watir进行了系统性的学习,比起学习C++, Java等始终不得门,Watir还是学进去了,能够完整搭建出一个自己很容易理解的自动化架构. 之后我想继续在自动化测试方 ...
- CSS counter计数器(content目录序号自动递增)详解
一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...