<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>縮放變換</title>
    <style>
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        context.strokeStyle = "red";
        context.lineWidth = 5;
        for(var i = 1; i < 4; i++){
            context.save();
            context.scale(i,i);
            context.strokeRect(50,50,150,100);
            context.restore();
        }
    };
</script>
</body>
</html>

演示 15-1

運(yùn)行結(jié)果：

縮放變換

縮放變換應(yīng)注意的問題

看了上面的例子，大家一定對產(chǎn)生的結(jié)果有點(diǎn)奇怪。一是左上角頂點(diǎn)的坐標(biāo)變了，而是線條的粗細(xì)也變了。因此，對于縮放變換有兩點(diǎn)問題需要注意：

縮放時(shí)，圖像左上角坐標(biāo)的位置也會(huì)對應(yīng)縮放。
縮放時(shí)，圖像線條的粗細(xì)也會(huì)對應(yīng)縮放。

比如對于最小的那個(gè)原始矩形，它左上角的坐標(biāo)是（50，50），線條寬度是5px，但是放大2倍后，左上角坐標(biāo)變成了（100，100），線條寬度變成了10px。這就是縮放變換的副作用。

童鞋們一定在期待著我說解決副作用的途徑。很遺憾，沒有什么好的方法去解決這些副作用。如果想固定左上角坐標(biāo)縮放，可以把左上角坐標(biāo)變成（0，0），這樣的話無論是什么倍數(shù)，0乘上它還是0，所以不變。如果不想讓線條粗細(xì)變化，那就別使用線條?；蛘咦约悍庋b一個(gè)函數(shù)，不要使用scale()。

究其根本，之前我們說過平移變換、旋轉(zhuǎn)變換、縮放變換都屬于坐標(biāo)變換，或者說是畫布變換。因此，縮放并非縮放的是圖像，而是整個(gè)坐標(biāo)系、整個(gè)畫布！就像是對坐標(biāo)系的單位距離縮放了一樣，所以坐標(biāo)和線條都會(huì)進(jìn)行縮放。仔細(xì)想想，這一切貌似挺神奇的。

好啦，這一節(jié)的內(nèi)容就這么少，讓我們檢查一下彈藥是否充足，準(zhǔn)備征戰(zhàn)圖形變換的最終Boss。繼續(xù)前進(jìn)！

上一篇：CANVAS——Draw on the Web下一篇：Ch10 使用切點(diǎn)繪制圓弧

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch15 縮放變換

縮放變換scale()

縮放變換應(yīng)注意的問題

縮放變換`scale()`