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

时间: 2024-10-12 22:59:02

canvas 平移&缩放的相关文章

WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图: XAML代码:// Transform.XAML <Canvas Width="700" Height="700" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://sc

旋转 平移 缩放

------------------------------  旋转 平移 缩放  ---------------------------------- - (void)drawRect:(CGRect)rect { // 获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); //  Current graphics state's Transformation Matrix // 缩放 CGContextScaleCTM(ctx, 0.

百度地图之添加控件——比例尺、缩略图、平移缩放

地图控件概述 百度地图上负责与地图交互的UI元素称为控件.百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件. 地图API中提供的控件有: Control:控件的抽象基类,所有控件均继承此类的方法.属性.通过此类您可实现自定义控件. NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能.移动端提供缩放控件,默认位于地图右下方. OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折

Android进度条控制图片旋转&#183;平移&#183;缩放&#183;倾斜

初来乍到 平时代码多写于某笔记软件上 现在在这里记录一些 从初学Android开始写起 可能有些地方实现得略小白 或者还不能熟练使用博客园的功能 但是希望能够对需要的人有帮助 不足之处请多指教 一般使用工具:android studio 那么 Here we go. have a good time. 用进度条实现控制图片旋转·平移·缩放·倾斜 效果: 1 public class MainActivity extends AppCompatActivity implements SeekBar

[ html canvas 旋转 缩放 平移 ] canvas绘图实现旋转复制实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

[C#] Graphics平移缩放旋转

[平移] private void btnTranslate_Click(object sender, EventArgs e) { Graphics graphics = this.CreateGraphics(); // 红色笔 Pen pen = new Pen(Color.Red, 5); Rectangle rect = new Rectangle(0, 0, 200, 50); // 用红色笔画矩形 graphics.DrawRectangle(pen, rect); // 向左平移

OpenGL中旋转平移缩放等变换的顺序对模型的影响

l 前提: 0x01. 假设绘制顶点的语句为Draw Array,变换的语句(旋转.平移.缩放)为M,而 M0; M1; M2; Draw Array; 则称对Array先进行M2再进行M1.M0 0x02. 本文基于SharpGL版本的OpenGL(C#版本) l 预备知识: 0x01. gl.Rotate是按照右手系来计算的,即设旋转轴为大拇指方向,则从指跟到指尖的方希为正方向. 0x02. gl.Scale 会改变法向量的值,从而会对颜色有影响.通过gl.Enable(OpenGL.GL_

图形上下文的矩阵操作(平移-缩放-旋转)

图形上下文的矩阵操作(旋转.缩放和平移) CGContextRotateCTM:图形上下文旋转,以上下文的原点(左上角)为基准 CGContextScaleCTM:图形上下文的缩放,以上下文的原点(左上角)为基准 CGContextTranslateCTM:图形上下文的平移,以上下文的原(左上角)点为基准 注意:一定要在添加路径之前进行设置 下面贴出swift版代码: 1 override func draw(_ rect: CGRect) { 2 let context = UIGraphic

HDU 4087 三维上的平移缩放旋转矩阵变化

题目大意: 就是根据它给的程序的要求,不断平移,缩放,旋转三维的点,最后计算出点的位置 这里主要是要列出三种转换方式的齐次矩阵描述 平移translate tx ty tz1 0 0 00 1 0 00 0 1 0tx ty tz 1缩放scale a b ca  0  0  00  b  0  00  0  c  00  0  0  1绕任意轴(过原点)旋转(注意要把轴向量归一化,否则点在旋转轴上时有问题) 这里是以(x,y,z)向量指向我们人的方向逆时针旋转 d 的弧度rotate x y