Explication détaillée de la façon de réaliser des modifications de traduction et de rotation d'images grâce aux compétences du didacticiel HTML5 Canvas

Explication détaillée de la façon de réaliser des modifications de traduction et de rotation d'images grâce aux compétences du didacticiel HTML5 Canvas_html5

WBOY

Libérer： 2016-05-16 15:45:25

original

2818 Les gens l'ont consulté

Transformation de traduction traduire()
La transformation de traduction, d'où son nom, est un déplacement graphique général. Par exemple, ici je veux traduire le rectangle situé en (100, 100) vers le point (200, 200). Ensuite, j'ai juste besoin d'ajouter context.translate(100,100) avant de dessiner le rectangle.

La fonction translation() ne transmet ici que deux paramètres, qui sont en fait les coordonnées de l'origine du nouveau système de coordonnées du canevas. Jetons un coup d'œil à l'effet avec le code ci-dessous.

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html lang="zh" >
<tête>
<meta charset="UTF- 8">
<titre>平移变换titre>
<style>
corps { arrière-plan : url("./images/bg3.jpg") répéter ; }
#canvas { border : 1px solid #aaaaaa ; affichage : bloquer ; marge : 50 px auto ; }
style>
tête>
<corps>
<div id="toile- chaîne">
<toile id="toile" >
你的浏览器居然不支持Canvas？！赶快换一个吧！！
toile>
div>
<script>
window.onload = fonction(){
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.fillStyle = "#00AAAA";
context.fillRect(100,100,200,100);
context.fillStyle = "rouge";
context.translate(100,100);
context.fillRect(100,100,200,100);
} ;
script>
corps>
html>

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

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

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

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

Code JavaScript复制内容到剪贴板

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

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

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

第二，在每次平移之前使用context.save()，在每次绘制之后，使用context.restore()。

切记，千万不要再想着我继续紧接着第一次平移之后再平移translate(100,100)不就行了，这样你自己的坐标系就会乱套，根本找不到自己的坐标系原点在所以一定要以最初状态为最根本的参照物，这是原则性问题。这里我建议使用第二种方法，而且在涉及所有图形变换的时候，都要这么处理，不仅仅是平移变换。