亚洲国产精品人久久,亚洲va国产日韩欧美精品色婷婷,久久久久88色偷偷,免费人成黄页在线观看国际

17站長(zhǎng)網(wǎng)

HTML5 Canvas 轉(zhuǎn)換

html5 Canvas的轉(zhuǎn)換方法，在線(xiàn)實(shí)例演示如何使用html5 Canvas進(jìn)行旋轉(zhuǎn)、移動(dòng)、縮放，圍繞不同點(diǎn)旋轉(zhuǎn)，縮放比例設(shè)置等。

您可以將轉(zhuǎn)換應(yīng)用于HTML5畫(huà)布上繪制的任何內(nèi)容。這是您可以應(yīng)用的轉(zhuǎn)換的列表:

移動(dòng)(移動(dòng)繪制的內(nèi)容)
旋轉(zhuǎn)
縮放

本文中介紹所有這些轉(zhuǎn)換

轉(zhuǎn)換矩陣

可以在2D上下文中設(shè)置轉(zhuǎn)換矩陣。此矩陣將乘以畫(huà)布上繪制的所有內(nèi)容。對(duì)于本教程中使用的示例，我將其設(shè)置為“身份”矩陣，該矩陣乘以x，y坐標(biāo)集后得出x，y。換句話(huà)說(shuō)，不進(jìn)行任何轉(zhuǎn)換。
這是將轉(zhuǎn)換矩陣設(shè)置為單位矩陣的方法:

context.setTransform(1, 0, 1, 0);

移動(dòng)

可以將移動(dòng)應(yīng)用于畫(huà)布上繪制的所有內(nèi)容。移動(dòng)意味著所畫(huà)內(nèi)容的重定位。這是您在代碼中設(shè)置移動(dòng)的方式:

var x = 100;var y =  50;
context.translate(x, y);

本示例將在畫(huà)布上繪制的所有形狀在x軸上移動(dòng)100，在y軸上移動(dòng)50。
注意：平移僅適用于translate()調(diào)用函數(shù)后繪制的形狀。在該函數(shù)調(diào)用之前繪制的形狀不受影響。
這是另一個(gè)示例。在相同的坐標(biāo)處繪制了兩個(gè)矩形，但是在translate()調(diào)用該函數(shù)之前繪制了一個(gè)矩形，在之后繪制了一個(gè)矩形

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");
 
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100, 100);
 
context.translate(50, 25);
 
context.fillStyle = "#0000ff";
context.fillRect(10, 100);
</script>

這是在畫(huà)布上繪制時(shí)的結(jié)果:

HTML5 Canvas 轉(zhuǎn)換

旋轉(zhuǎn)

您可以將自動(dòng)旋轉(zhuǎn)應(yīng)用于在HTML5畫(huà)布上繪制的任何形狀。這是通過(guò)rotate()2D上下文上的功能完成的 。這是一個(gè)簡(jiǎn)單的示例:

context.rotate(radians);

旋轉(zhuǎn)角度作為參數(shù)傳遞給rotate()函數(shù)。該值必須以弧度而不是度為單位。
設(shè)置旋轉(zhuǎn)后繪制的所有形狀都將繞畫(huà)布上的0,0點(diǎn)旋轉(zhuǎn)。這是畫(huà)布的左上角。
與平移一樣，旋轉(zhuǎn)僅應(yīng)用于rotate() 調(diào)用函數(shù)后繪制的所有形狀。
這是在設(shè)置旋轉(zhuǎn)前后繪制相同矩形的示例:

<canvas id="ex2" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
 var canvas  = document.getElementById("ex2");
var context = canvas.getContext("2d");
 context.fillStyle = "#ff0000";
 context.fillRect(10, 100);
 
 context.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.
 context.fillStyle = "#0000ff";
 context.fillRect(10, 100);
</script>

這是在畫(huà)布上繪制矩形時(shí)的外觀:

HTML5 Canvas 轉(zhuǎn)換

圍繞不同點(diǎn)旋轉(zhuǎn)

如前所述，所有形狀都圍繞畫(huà)布（0,0）的左上角旋轉(zhuǎn)。但是，如果您希望形狀繞不同的點(diǎn)旋轉(zhuǎn)怎么辦？例如，圍繞其自身的中心旋轉(zhuǎn)形狀？
要圍繞其自身的中心旋轉(zhuǎn)形狀，必須首先將畫(huà)布平移到形狀的中心，然后旋轉(zhuǎn)畫(huà)布，然后將畫(huà)布平移回0,0，然后繪制形狀。
這是一個(gè)代碼示例，它使藍(lán)色矩形圍繞其中心旋轉(zhuǎn):

<canvas id="ex3" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex3");
var context = canvas.getContext("2d");
 
var x      = 10;
var y      = 10;
var width  = 100;
var height = 100
var cx     = x + 0.5 * width;
var cy     = y + 0.5 * height;
 
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
 
context.translate(cx, cy);
context.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.
context.translate(-cx, -cy); //set center back to 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, height);
</script>

這是在畫(huà)布上繪制時(shí)的外觀:

HTML5 Canvas 轉(zhuǎn)換

此示例首先將畫(huà)布的中心平移（移動(dòng)）到正方形的中心（cx，cy）。然后將畫(huà)布旋轉(zhuǎn)25度。然后，它將畫(huà)布再次轉(zhuǎn)換回0,0。現(xiàn)在，畫(huà)布圍繞cx，cy旋轉(zhuǎn)了25度。您繪制的所有內(nèi)容都將圍繞cx，cy旋轉(zhuǎn)顯示。最終，該矩形被繪制為好像什么都沒(méi)發(fā)生一樣，但是現(xiàn)在它將圍繞cx，cy旋轉(zhuǎn)25度。這僅使用轉(zhuǎn)換調(diào)用即可實(shí)現(xiàn)。矩形的坐標(biāo)不變。請(qǐng)注意context.fillRect()，繪制紅色和藍(lán)色矩形的兩個(gè)調(diào)用是如何相同的。正是它們之間的轉(zhuǎn)換調(diào)用使它們出現(xiàn)在不同的位置和旋轉(zhuǎn)位置

縮放

可以對(duì)在HTML5畫(huà)布上繪制的所有形狀應(yīng)用自動(dòng)縮放。
縮放時(shí)，可以通過(guò)某些因素縮放x軸和y軸上的所有坐標(biāo)。您可以使用scale()函數(shù)設(shè)置這些因素，如下所示:

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

本示例將x軸和y軸上的所有坐標(biāo)縮放2倍。
與translate()和一樣rotate()，縮放比例僅適用于scale()調(diào)用后繪制的形狀。
這是另一個(gè)繪制紅色和藍(lán)色矩形的代碼示例，其中縮放比例適用于藍(lán)色矩形:

<canvas id="ex5" width="500" height="250" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x      = 10;
var y      = 10;
var width  = 100;
var height = 100
 
context.fillStyle = "#ff0000";
context.fillRect(x, height);
 
context.scale(2,2);
 
context.fillStyle = "#0000ff";
context.fillRect(x, height);
</script>

這是在畫(huà)布上生成的grapichs:

HTML5 Canvas 轉(zhuǎn)換

請(qǐng)注意，藍(lán)色矩形的大小是紅色矩形的兩倍。
還要注意，從藍(lán)色矩形的左上角到畫(huà)布的左上角（0,0）的距離也兩倍。所有坐標(biāo)都縮放了兩倍，矩形的左上角坐標(biāo)也是如此。如果要避免在縮放時(shí)移動(dòng)形狀，則必須將縮放與平移結(jié)合起來(lái).

平移，旋轉(zhuǎn)和縮放組合

當(dāng)然可以將所有三個(gè)轉(zhuǎn)換組合在同一畫(huà)布上。但是，就像組合旋轉(zhuǎn)和平移時(shí)一樣，對(duì)2D上下文進(jìn)行函數(shù)調(diào)用的順序也很重要。如果scale()在調(diào)用translate() 等之前調(diào)用，則結(jié)果看起來(lái)會(huì)有所不同。您可能需要對(duì)函數(shù)調(diào)用的順序進(jìn)行一些調(diào)整才能使其正確

返回頂部