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

<!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. MySQL：MySQL的基本操作

    1.数据库登录 格式:mysql -h主机地址 -u用户名 -p用户密码 -P端口 -D数据库 -e “SQL内容” [root@wulaoer ~]# mysql -uroot -p  2.修改密码 ...

  2. unbtun python tab补全

    在使用python的时候有时候总是忘记很多代码,这个是作为程序袁最头疼的事情,本人也是刚刚接触python,这几天也是用到这块,所以记录下来,已被需要时能够找到. 我的系统是:  w@w:~$ una ...

  3. nexus 中央仓库

    nexus 中央仓库 下载地址:http://www.sonatype.org/nexus/archived 下载最新版本 mkdir -p /opt/local/nexus tar zxvf nex ...

  4. 在mac本上删除mysql

    The steps: First you need to edit the file in: /etc/hostconfig and remove the line Since this is a s ...

  5. ice grid 完整部署过程

    待补充 一 理论准备 一个IceGrid集群有一个registry(注册表,用于定位)和多个node组成. IceGrid配置包括集群配置和应用配置: config.grid是集群配置,配置Regis ...

  6. python模块 ---logging模块

    摘要by crazyhacking: 与log4cxx一样,分为三个部分,logger, handler,formatter. 详细内容参考:1官网http://docs.python.org/2/h ...

  7. kafka第五篇

    架构设计:http://www.linuxeden.com/html/news/20130309/136716_2.html 代码实现consumer 和producer

  8. highcharts柱状图和饼图的数据填充

    1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...

  9. 《数据结构与算法分析：C语言描述》读书笔记------List的C语言实现

    List的简单实现.在GCC下测试通过. list.h #ifndef _List_H /*List数据结构的简单实现*/ struct Node; typedef struct Node Node; ...

  10. mysql----ERROR 1040 (HY000): Too many connections

    http://gwokae.mewggle.com/wordpress/index.php/archives/683 查看最大链接 mysql -h alg-db14 -u bfdroot -pqia ...