可以进行坐标缩放，设为负值可以翻转图片；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    ctx.beginPath();

    ctx.strokeStyle = '#000000';

    ctx.strokeRect(10, 10, 150, 100);

    ctx.scale(3, 3);

    ctx.beginPath();

    ctx.strokeStyle = '#cccccc';

    ctx.strokeRect(10, 10, 150, 100);

    ctx.scale(0.15,0.15);

    ctx.beginPath();

    ctx.strokeStyle = '#ff0000';

    ctx.strokeRect(10,10,150,100);

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        ctx.drawImage(img, 10, 10);

        ctx.scale(1, -1);

        ctx.drawImage(img, 250, -250);

        ctx.arc(250, -250, 20, 0, 2 * Math.PI, true);

        ctx.stroke();

    };

    </script>

</body>

</html>

Canvas scale- 缩放的更多相关文章

  1. css3 新特性（2D translate 移动，rotate 旋转 ， scale 缩放）

    1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形) 移动:translate            旋转:rotate          缩放:scale 2. ...

  2. html5 canvas旋转+缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. canvas 平移&缩放

    1.平移 canvas其实只是一个包装器,真正起着重要作用的部分是2D渲染上下文,这才是我们真正绘制图形的地方. 然而2D渲染上下文是一种基于屏幕的标准绘制平台.它采用屏幕的笛卡尔坐标系统,以左上角( ...

  4. css3动画属性系列之transform细讲scale缩放

    下面我们从3个方面开始介绍: 1.scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的. ...

  5. 基于canvas绘图 缩放 做标记

    技术要点: 1.img 绘制到canvas 2.绘制完成以后进行拖拽,缩放 3.使用canvas画图,在绘制的img上进行标记划线,当然可以实现跟过功能,例如百度地图的功能,做单个标记,区域标记等. ...

  6. cocos2dx,Layer锚点与scale缩放

    最近写代码需要用到缩放,而且是Layer的,但是发现怎么设置位置都是错误,于是决定研究下. 首先,基础代码,代码上不错特殊处理,没有锚点设置和缩放 class TestLayer : public L ...

  7. css3 scale 缩放出现 1px 问题

    问题描述 先来一段html代码 <div class="container"> <div class="parent"> <div ...

  8. iTween Scale缩放

    void Start () { //键值对儿的形式保存iTween所用到的参数 Hashtable args = new Hashtable(); //放大的倍数 args.Add(, , )); / ...

  9. 【转】android Graphics（四）：canvas变换与操作

    android Graphics(四):canvas变换与操作 分类: 5.andriod开发2014-09-05 15:05 5877人阅读 评论(18) 收藏 举报   目录(?)[+]   前言 ...

  10. android Graphics（四）：canvas变换与操作

    前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清 ...

随机推荐

  1. python第一天（文件流以及控制流）简单总结

    第一天的python学习主要是: (1)对python的一个大致了解 值得注意的是在window下开发要注意path的问题. (2)对python控制流的一个了解 常用的if ,while ,for ...

  2. ionic常用命令记录

    npm install -g ionic //安装ionic ionic lib update //更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower upda ...

  3. java如何计算程序运行时间

    long startTime = System.currentTimeMillis();    //获取开始时间 doSomething();    //测试的代码段 long endTime = S ...

  4. hibernate--联合主键--XML

    xml:composite-id 要重写equals,hashCode方法, 还要序列化 1. 新建一个主键类: StudentPK.java, 注意需要序列化.还要重写equals和hashCode ...

  5. php 中的全局变量的理解

    $GLOBALS 是php中的一个全局变量的数组. $GLOBALS['var1']  代表的是 外部的全局变量 $var1 本身.global $var是外部$var的同名引用或者指针 例1: &l ...

  6. JSON串行化

    大多数情况下,我们不会再Javascript中直接创建JSON字符串.而是,创建一些Javascript对象,这些对象和服务器上的.net对象对应.因此,可以在服务器上创建.net实体类,然后串行化成 ...

  7. [iOS Animation]-CALayer 专用图层

    专用图层 复杂的组织都是专门化的 Catharine R. Stimpson 到目前为止,我们已经探讨过CALayer类了,同时我们也了解到了一些非常有用的绘图和动画功能.但是Core Animati ...

  8. IOS开发－OC学习－常用功能代码片段整理

    IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...

  9. 查看Linux连接数

    netstat  -ant | grep ESTABLISHED  | wc -l

  10. iOS 消息推送原理及实现总结 分类： ios技术 2015-03-01 09:22 70人阅读 评论(0) 收藏

    在实现消息推送之前先提及几个于推送相关概念,如下图: 1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服 ...