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

<!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之路： socket篇

    (默认)与特定的地址家族相关的协议,如果是  ,则系统就会根据地址格式和套接类别,自动选择一个合适的协议 sk import socketip_port = ()sk = socket.socket( ...

  2. STM32开发指南-DMA

    DMA,直接存储器访问.传输数据时,外设通过DMA控制器直接访问内存,不经过cpu直接控制传输数据.不需要像中断处理方式需要保留和恢复现场的过程.通过硬件为内存和I/O设备开辟一条直接传送数据的通道, ...

  3. 天天记录 - Android抓包 - 抓取HTTP，TCP协议数据

    需要两个工具tcpdump和Wireshark,  tcpdump的使用需要root权限     一  tcpdump   1. 下载 tcpdump首页  http://www.tcpdump.or ...

  4. 织梦网站底部的Power by DedeCms怎么去掉？

    由于织梦DEDECMS程序6月份的漏洞,很多织梦网站都被黑了,所以大家都在抓紧时间更新系统补丁.但是这次的DEDECMS V5.7版本更新后,在前台网页底部会出现织梦版权信息 “powered by ...

  5. python之路： 基础篇

    )或>>> name = )    #按照占位符的顺序):]        #下标识从0开始的 wulaoer >>> print name[:]        # ...

  6. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  7. CentOS 7 x64 安装 Ceph

    CentOS 7  x64 安装 Ceph 二, 实验环境 节点            IP                 主机名                  系统 MON         1 ...

  8. [iOS Animation]-CALayer 定时器动画

    定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速 ...

  9. mysql管理----状态参数释义

    下面是数据库MySQL优化的一些步骤 一.通过show status和应用特点了解各种SQL的执行频率 通过SHOW STATUS可以提供服务器状态信息,也可以使用mysqladmin extende ...

  10. CORBA技术及实例

    CORBA技术及实例 CORBA是一种规范,它定义了分布式对象如何实现互操作.在WorldWideWeb盛行之前,非凡是java编程语言风靡之前,C++开发者基本将CORBA作为其高端分布式对象的解决 ...