canvas变换方法原理探究

作者: Kagashino | 来源:发表于2016-12-17 13:32 被阅读60次

canvas变换方法原理探究
自定义View基础（二）
H5 新特性03
canvas的线性变换原理
Canvas&Paint 知识梳理(1) - Canva
8个前端知识点：HTML5(canvas应用)
三、Canvas基本绘图
黑箱理论和等价信息的运用
View绘制画布的操作
自定义View Canvas的范围裁切与几何变换

下午就考六级了，现在还闲不住。。。。

我们今天讲解画布对象3种变换方法：

scale，对x,y两个方向进行比例缩放
translate，平移
rotate，旋转

先来个矩形，再画2条基线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布变换规律探究</title>
</head>
<body>
    <canvas id="cvs1" width="400" height="400" style="background:#6cf">你的浏览器是低版本的IE？太不幸了，换一个吧</canvas>
</body>
    <script>
        var ctx = document.getElementById('cvs1').getContext('2d');
        ctx.strokeStyle = "black";
        ctx.strokeRect(0,10,400,0);
        ctx.strokeRect(10,0,0,400);
        ctx.fillStyle="#d33";
        ctx.fillRect(10,10,40,100);
    </script>
</html>

QQ截图20161217122633.png

我们在参考线渲染之后加入scale方法，使得矩形渲染之前变换：

QQ截图20161217123541.png

得到的是这个：

QQ截图20161217123548.png

我们发现，用scale方法对X轴进行拉伸时，矩形的位置也偏移了，为什么呢？

原因：scale方法是针对整个画布缩放，缩放参考点默认在左上角

假如我们把矩形放在左上角渲染，scale不变：

QQ截图20161217124119.png

QQ截图20161217124356.png

可以看到，方形位置不偏移了，验证了我们所说：<strong>“scale参考点默认在左上角”</strong>的说法

接下来我们使用translate方法偏移整个画布：

QQ截图20161217124603.png

QQ截图20161217124610.png

可以看到，矩形位置也不再像第一次那样偏移，因为锚点、矩形跟随着整个画布移动了

核心结论：scale、translate方法都是作用在画布而不是里面的某个图形中

特别说明一点，两条基准线是在我使用变换方法之前渲染的，渲染之后所有的方法都对基线无效！

同样的的原理也适用于rotate方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布原理</title>
</head>
<body>
    <canvas id="cvs1" width="400" height="400" style="background:#ddf">你的浏览器是低版本的IE？太不幸了，换一个吧</canvas>
</body>
    <script>
        var ctx = document.getElementById('cvs1').getContext('2d');
        ctx.strokeStyle = "black";
        ctx.strokeRect(0,200,400,0);//把线移到画布中央
        ctx.strokeRect(200,0,0,400);
        ctx.fillStyle="#d33";
        ctx.fillRect(200,200,40,100);//矩形也跟着落在画布中央
    </script>
</html>