canvas 平移&縮放

時間 2019-11-13

標籤 canvas 平移縮放简体版

原文原文鏈接

1.平移
canvas其實只是一個包裝器，真正起着重要做用的部分是2D渲染上下文，這纔是咱們真正繪製圖形的地方。
然而2D渲染上下文是一種基於屏幕的標準繪製平臺。它採用屏幕的笛卡爾座標系統，以左上角（0,0）座標爲原點。
向右移動時x的座標值增長，向下移動時y的座標值增長。
好了瞭解了座標系統以後，我們就能夠盡情的移動處理圖形的位置了！
平移，也就是參照2D渲染上下文的原點(0,0)，將圖形從一個座標點移動到另外一個座標點的過程！
使用方法：translate(x,y) 兩個參數分別以原點爲座標向左增長x個單位值，向下增長y個單位值。javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>變形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.fillRect(150, 150, 100, 100);
            context.translate(150, 150);  //設置平移  
            context.fillStyle = "rgb(255,0,0)";
            context.fillRect(150, 150, 100, 100);   //執行位移後，將原點座標(150,150)分別加上150，即以座標(300,300)爲原點座標繪製寬高爲100單位的矩形。
            
            context.fillStyle = "rgb(0,255,255)";
            context.translate(150, 150);   //兩次位移 至關於位移了300  仍是以(300,300)爲座標進行繪製
            context.fillRect(0, 0, 100, 100);
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的瀏覽器暫不支持畫布！
    </canvas>
</body>
</html>

由此不難看出，canvas的繪圖狀態一旦設置，就會影響以後全部元素的繪製屬性！
這是因爲它們都是在2D渲染上下文中操做的，而不是隻針對所繪製的圖形。html

2.縮放
使用方法：scale(x,y);
調整元素在2D上下文中的尺寸，與平移的區別在於(x,y)參數是縮放倍數，而不是像素值。
單獨使用該方法，會讓以後全部元素都跟着放大相應的倍數，這確定不是你所想要的！
所以咱們能夠在縮放前，先調用save()方法，保存一下繪圖狀態，等當前元素執行了縮放以後，
咱們再調用一下restore()方法，這樣就能夠恢復到以前的繪圖狀態了，從而實現只對當前元素進行縮放的操做！java

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>變形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.save();  //先保存下繪圖狀態
            context.translate(150, 150);  //進行位移操做
            context.scale(2, 2);  //將繪製元素放大2倍
            context.fillRect(0, 0, 100, 100);  
            context.restore();  //恢復繪圖狀態
            context.fillRect(0, 0, 100, 100);  //此時，繪製的矩形既沒位移，又沒放大！
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的瀏覽器暫不支持畫布！
    </canvas>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。