Canvas 缩放(scale())

原创 2018年04月15日 14:15:45


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 缩放坐标轴:
        * ctx.scale( x轴缩放的比值,y轴缩放的比值 )
        * 注意:已绘制的图形不会受到影响;缩放会累加(在之前缩放、平移、旋转的基础上再缩放)。
        * */

        ctx.translate( 100, 100 );
        ctx.fillRect( 0, 0, 50, 50 );

        // 缩放坐标轴,再按照同样的坐标绘制填充矩形
        ctx.scale( 0.5, 0.5 );  //缩放不会影响已经画好的图形。
        ctx.fillStyle = 'pink';
        ctx.fillRect( 0, 0, 50, 50 );

        // 缩放坐标轴,再按照同样的坐标绘制填充矩形
        ctx.scale( 0.5, 0.5 );  //缩放是在之前缩放、平移、旋转的基础上再缩放(缩放会叠加)
        ctx.fillStyle = 'blue';
        ctx.fillRect( 0, 0, 50, 50 );

    </script>
</body>
</html>


Canvas动画和手机游戏开发

风靡全球的网页小游戏,只需要前端技术就可以实现哦。现在爱前端邵山欢老师将带领同学们用最短的时间实现fiappybird游戏开发。游戏使用canvas绘制图像、坐标变换、绘制文字。游戏原理、制作2D游戏引擎、理解游戏循环、渲染引擎实现、使用引擎构建游戏实例、游戏常用算法。
  • 2017年08月24日 10:02

Android Canvas 缩放(Scale)

Canvas 缩放(Scale)   前言:前几天用到Canvas.scale(flostsx, float sy, float px, float py)函数,研究源码后没有看懂,就去网上找资料,发...
  • u011451706
  • u011451706
  • 2016-09-08 17:14:08
  • 5766

canvas控制图片缩放

例子:     您的浏览器不支持canvas     var canvas = document.getElementById("can...
  • kongjunchao159
  • kongjunchao159
  • 2015-08-25 15:22:41
  • 3271

Unity UGUI之Canvas Scale

Canvas Scaler 为了适应不同的分辨率,我们可能会允许适当的UI整体性缩放,外加一些尽可能少的布局微调。 这样就能达到一个比较理想的效果。Unity为我们提供了Canvas Scaler组...
  • qq563129582
  • qq563129582
  • 2016-12-18 17:09:27
  • 5257

Android学习笔记之Bitmap位图的缩放

位图的缩放也可以借助Matrix或者Canvas来实现。 通过postScale(0.5f, 0.3f)方法设置旋转角度,然后用createBitmap方法创建一个经过缩放处理的Bitmap对象,最...
  • SJF0115
  • SJF0115
  • 2012-02-15 22:43:53
  • 23141

canvas 变形记——移动、旋转、缩放、变形

canvas 有几个变形形式:移动、旋转、缩放、变形。在做变形之前先保存状态是一个良好的习惯。大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多。又,如果你是在一个循环中做位移但没...
  • u014181418
  • u014181418
  • 2016-06-21 14:41:51
  • 963

Canvas---Canvas图像处理、图片查看器、图像缩放功能的实现。

模仿手机图像查看软件用canvas实现一个图像查看器。 目前实现: 利用将图像起点绘制到canvas之外的技术实现了图像的缩放。 包括,图像自适应、图像放大缩小 下一步准备实现: 鼠标拖动图像 截图:...
  • MIKUScallion
  • MIKUScallion
  • 2015-01-31 21:43:19
  • 3329

赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印

上一篇已经介绍了Android种Bitmap和Canvas的使用,下面我们来写一个具体实例 http://blog.csdn.net/zhaoyazhi2129/article/details/32...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2014-06-18 16:34:58
  • 4573

Canvas之translate、scale、rotate、skew方法讲解!

前面说Canvas大致可以分为三类: 1. save、restore 等与层的保存和回滚相关的方法; 2. scale、rotate、clipXXX 等对画布进行操作的方法; 3. drawXXX 等...
  • tianjian4592
  • tianjian4592
  • 2015-05-07 13:49:06
  • 32468

Android 利用ScaleDrawable实现缩放

一,布局
  • Jason101123
  • Jason101123
  • 2017-12-28 11:38:58
  • 106
收藏助手
不良信息举报
您举报文章:Canvas 缩放(scale())
举报原因:
原因补充:

(最多只允许输入30个字)