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

<!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. 关于nodejs的require顺序

    --------------------------------------- check /home/somebody/node_modules/othermodule check /home/so ...

  2. 安卓图表引擎AChartEngine(四) - 源码示例 嵌入Acitivity中的折线图

    前面几篇博客中都是调用ChartFactory.get***Intent()方法,本节讲的内容调用ChartFactory.get***View()方法,这个方法调用的结果可以嵌入到任何一个Activ ...

  3. 获取一个gridcontrol的数据行数

    ((DataTable)gc_excel.DataSource).Rows.Count;

  4. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  5. PHP学习笔记-session

    session 在windows中的默认保存在AppDate/Local/Temp

  6. (简单) POJ 1278 Catch That Cow，回溯。

    Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...

  7. 《算法导论》归并排序----merge-sort

    伪代码请见<算法导论>2.3节 merge-sort实现: public class MergeSort {        public static void sort(double [ ...

  8. c++ builder 2009如何生成独立运行exe（转）

    参考资料:https://forums.codegear.com/thread.jspa?threadID=13559&tstart=703 查了很多网站资料,说得差不多,但是最后编译出来的还 ...

  9. D Vitamin - the wonder vitamin

    原文 Be healthier and happier by spending time in the sun In the dead of winter,we don't typically thi ...

  10. IOS开发中UIFont字体设置

    我们在开发中很多时候要设置UIlabel,UIbutton,UItextfield的字体,这个时候我们就需要用到UIFont,下面简单介绍一下UIFont的用法,仅供参考. UIFont用于获取和设置 ...