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/ ...
随机推荐
- iOS开发UIScrollView常见属性和方法
一.ScrollView常用方法和属性 @property(nonatomic)CGPoint contentOffset; 设置滚动的偏移量 @property(nonatomic)CGSize c ...
- 编译android内核和文件系统，已经安装jdk，提示build/core/config.mk:268: *** Error: could not find jdk tools.jar
1:确保安装jdk,如果没有安装请移布:http://www.cnblogs.com/jiuyueguang/p/3156621.html 2:如果已经安装了jdk,还是提示此错误, 解决方法 请确保 ...
- React中Transition的作用
/** * `Transaction` creates a black box that is able to wrap any method such that * certain invarian ...
- repo 工具下载 以及 android代码下载【转】
本文转载自:http://www.enjoydiy.com/608.html 我们可以从https://www.codeaurora.org/网站下载android源码. 具体方法如下: 下载repo ...
- 织梦CMS如何在首页调用指定的文章 idlist
在网站首页调用站内新闻是必不可少的,但是有的时候不能根据自己的需要来调用指定的文章,想要调用自己指定的文章还要做一些修改. 在网站中调用指定文章可以使用织梦默认的标签idlist,在调用的时候使用以下 ...
- g00 网站说明
最近在做dns tunnel检测,发现了一堆类似这样的域名:c-6rtwjumjzx7877x24uwjkjwjshjx78x2eywzx78yjx2ehtr.g00.medicinenet.com ...
- [原创]Java生成Word文档
在开发文档系统或办公系统的过程中,有时候我们需要导出word文档.在网上发现了一个用PageOffice生成word文件的功能,就将这块拿出来和大家分享. 生成word文件与我们编辑word文档本质上 ...
- codeforces 696B B. Puzzles(树形dp+概率)
题目链接: B. Puzzles time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- UISwitch用法:
代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...
- Laravel中常见的错误与解决方法小结
一.报错: 「Can't swap PDO instance while within transaction」 通过查询 Laravel 源代码,可以确认异常是在 setPdo 方法中抛出的: ? ...