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/ ...
随机推荐
- 用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具
用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...
- POJ3680 Intervals —— 区间k覆盖问题(最小费用流)
题目链接:https://vjudge.net/problem/POJ-3680 Intervals Time Limit: 5000MS Memory Limit: 65536K Total S ...
- HDU4292 Food —— 最大流 + 拆点
题目链接:https://vjudge.net/problem/HDU-4292 Food Time Limit: 2000/1000 MS (Java/Others) Memory Limit ...
- 织梦CMS首页、列表页文章如何调出该文章TAG标签?
1.如果是dedecms v5.7版本直接使用标签 [field:id function=GetTags(@me)/] 就可以调用出来了.只不过不带连接的. 2.如果需要连接请注释掉include/h ...
- JAVA 单选样式编写
<td class="main_matter_td">管网供水情况</td> <td align="left" class=&qu ...
- Oracle:ORA-00214
现场数据库服务器突然断电,启动时,提示如下现象: sql>sqlplus / as sysdba sql>startup ORA-00214: controlfile 'E:\oracle ...
- 第五届蓝桥杯C++B组省赛
1.啤酒和饮料 2.切面条 3.李白打酒 4.史丰收速算 5.打印图形 6.奇怪的分式 7.六角填数 8.蚂蚁感冒 9.地宫取宝 10.小朋友排队
- hdu 1075 What Are You Talking About(map)
题意:单词翻译 思路:map #include<iostream> #include<stdio.h> #include<string.h> #include< ...
- 时间:NSTimer,代码时运行时间段,
一:NSTimer 当时间间隔>1s是用NSTimer; 方法: [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selecto ...
- python(二):使用multiprocessing中的常见问题
简介在python的解释器中,CPython是应用范围最广的一种,其具有丰富的扩展包,方便了开发者的使用.当然CPython也不是完美的,由于全局解释锁(GIL)的存在,python的多线程可以近似看 ...