Penjelasan terperinci tentang cara merealisasikan terjemahan dan perubahan putaran imej melalui kemahiran tutorial HTML5 Canvas

Penjelasan terperinci tentang cara merealisasikan terjemahan dan perubahan putaran imej melalui kemahiran tutorial HTML5 Canvas_html5

WBOY

Lepaskan： 2016-05-16 15:45:25

asal

2819 orang telah melayarinya

Transformasi terjemahan translate()
Transformasi terjemahan, oleh itu namanya, ialah anjakan grafik umum. Sebagai contoh, di sini saya ingin menterjemahkan segi empat tepat yang terletak di (100, 100) kepada titik (200, 200). Kemudian saya hanya perlu menambah context.translate(100,100) sebelum melukis segi empat tepat.

Terjemah() di sini hanya lulus dalam dua parameter, yang sebenarnya merupakan koordinat asal sistem koordinat kanvas baharu. Mari kita lihat kesannya dengan kod di bawah.

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html lang="zh" >
<kepala>
<meta charset="UTF- 8">
<tajuk>平移变换<>tajuk>
<gaya>
badan { latar belakang: url("./images/bg3.jpg") ulang; }
#canvas { sempadan: 1px pepejal #aaaaa; paparan: sekat; jidar: 50px auto; }
gaya>
kepala>
<badan>
<div id="kanvas- meledingkan">
<kanvas id="kanvas" >
你的浏览器居然不支持Canvas？！赶快换一个吧！！
kanvas>
div>
<skrip>
window.onload = fungsi(){
var kanvas = dokumen.getElementById("canvas");
kanvas.lebar = 800;
kanvas.tinggi = 600;
var konteks = kanvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.fillStyle = "#00AAAA";
context.fillRect(100,100,200,100);
context.fillStyle = "merah";
context.translate(100,100);
context.fillRect(100,100,200,100);
};
skrip>
badan>
html>

运行结果：
2016322112903186.jpg (850×500)

这里的蓝色矩形，是矩形原来的位置，然后调用translate()方法，将矩形位移至（后空至（200，至200，位置。我们来用一张图看看，它是怎么做到平移变换的。
2016322112934958.jpg (850×500)

没错，其实这里的平移变换实质就是在平移坐标系，而对translate()传入的参数，就紮耶对于旧坐标系的原点。这使得我们依旧是在（100， 100）绘制的红色矩形，在平移坐标系之后，变到了（200，200）处。

注意使用状态保存：
其实这里有一个坑，我们如果想把矩形平移0至（30至）？或许我们会想，直接调用context.translate(200,200)就可以了。好，我们看看效果。

Kod JavaScript复制内容到剪贴板

"zh">
"UTF-8">
平移变换
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = fungsi(){

var kanvas = document.getElementById("kanvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

context.fillStyle = "#00AAAA";

context.fillRect(100,100,200,100);

context.fillStyle = "merah";

context.translate(100,100);

context.fillRect(100,100,200,100);

context.fillStyle = "hijau";

context.translate(200,200);

context.fillRect(100,100,200,100);

};

这里的绿色矩形并没有如我们所愿在（300，300）位置处，而是跑到了（400，了（400。？想必大家已经知道了答案——Kanvas是基于状态的绘制。在我们第一次平移之后，坐标系已经在（100，100）处了，所以如果继续平中中中文系继续平移坐标系。那么要怎么去解决呢？很简单，有两个方法。

第一，在每次使用完变换之后，记得将坐标系平移回原点，即调用translate(-x,-y)。

同画圆弧一样，这里的rotate(deg)传入的参数是弧度，不是角度。同时需要注意需要注愗入的参数是弧度，不是角度。同时需要注意需要注愗的是他们是，耶和系的原点（0，0）为圆心进行的顺时针旋转。所以，在使用rotate()之前，通常需要配合使用translate()平移坐标系，确定旋墳的。通常搭配平移变换使用的。

最后一点需要注意的是，Canvas是基于状态的绘制，所以每次旋转都是接着下上罬旋转，所以在使用图形变换的时候必须搭配save()与restore()方法，一方面重置旋转角度，另一方面重置坐标系原点。