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

<!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. js判断各个浏览器

    其实,实际写js的过程中,用功能判断”鸭shi辨形“的方法就可以了,不过,很多地方考试还是会问.所以总结一下,大部分都是分析navigator来实现的. var ua=navigator.userAg ...

  2. (中等) HDU 4725 The Shortest Path in Nya Graph，Dijkstra+加点。

    Description This is a very easy problem, your task is just calculate el camino mas corto en un grafi ...

  3. HTML学习（六）图像

    图像标签(<img>)和源属性(Src)在 HTML 中,图像由 <img> 标签定义.<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签.要在页面上显 ...

  4. POJ3169差分约束系统

    题意:有n头牛,编号为1到n,对于关系好的ml头牛,al和bl之间的距离不大于dl,关系差的md头牛,ad和bd之间的距离不大于dd,求第1头牛和第n头牛之间的距离 分析:这是一道差分约束系统的题目, ...

  5. 基于MDK编程STM32程序无法使用，硬件仿真在汇编窗口看到停留在“0x0800XXXX BEAB BKPT 0xAB //进入调试模式”

    为方便工作上做测试,移植FreeRTOS到STM32F103xx,先做简单的UART1 printf. 工程编译通过,运行逻辑也确认可行,可就是无法正常打印消息.对比了网上的移植工程也是一致,硬件仿真 ...

  6. LPC1768的usb使用--硬件篇

    LPC1768芯片带有USB设备控制器,前面写的文章都是在说比较简单的设备驱动,今天来说复杂一点的 首先是硬件层的配置 #ifndef __USBHW_H__ #define __USBHW_H__ ...

  7. MapReduce 表连接

    题目描述: 根据给定的关系 child parent Tom Lucy Tom Jack Jone Lucy Jone Jack Lucy Mary Lucy Ben Jack Alice Jack ...

  8. 关于IP网段间互访的问题—路由是根本（转）

    源: 关于IP网段间互访的问题—路由是根本

  9. 数字规律：Pascal‘s triangle

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in pol ...

  10. java基础——1.内部类

    内部类创建 从外部类的非静态方法之外(?=静态方法)的任意位置创建某个内部类的对象,要加入外部类的名字,OuterClassName.InnerClassName public class Parce ...