Exemples pour expliquer comment utiliser l'API HTML5 Canvas pour faire fonctionner les compétences du didacticiel rotation_html5 graphique

En tant que développeur Web, j'ai travaillé avec l'élément HTML5 canvas. Le rendu des images est une branche importante, très importante et couramment utilisée. Par conséquent, le didacticiel d'aujourd'hui concerne l'affichage des images sur le canevas et la manière de faire pivoter les images. C'est peut-être une bonne chose que vous souhaitiez vraiment maintenant.

En général, il existe deux manières de faire pivoter le canevas : la rotation centrale et la rotation du point de référence. Une application compétente de la fonction de rotation sera d’une grande aide pour vos travaux de développement.

À propos de la rotation centrale de l'objet
Le premier type de rotation, nous voulons examiner la rotation d'un objet autour de son centre. Implémenté à l'aide de l'élément canvas, qui est le type de rotation le plus simple. Nous avons utilisé l’image d’un gorille comme matériau pour notre expérience.
L'idée de base est que nous devons faire pivoter la toile autour d'un point central, la faire pivoter, puis la remettre dans sa position d'origine. Si vous avez une certaine expérience avec les moteurs graphiques, cela devrait vous sembler familier. Le code ressemble probablement à ceci : (Cliquez pour voir l'effet)

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction onload() {
2. var canvas = document.getElementById('c1'
);
3. var ctx1 = canvas.getContext('2d'
);
4. var image1 = nouveau Image();
5. image1.onload = fonction() {
6.  // rotation régulière autour du centre  
7. var xpos = toile.width/2
8. var ypos = toile.hauteur/2
9. ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2
);
10. ctx1.save();
11. ctx1.translate(xpos, ypos);
12. ctx1.rotate(47 * Math.PI / 180);//Rotation de 47 degrés
13. ctx1.translate(-xpos, -ypos);
14. ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2
);
15. ctx1.restore();
16. }
17. image1.src = 'image.png'
18. } 

Les commentaires sont déjà très détaillés, mais je tiens quand même à mentionner une chose : .save() et .restore(). Leur but est de sauvegarder le canevas tel qu'il était avant la rotation, puis de le restaurer après la rotation. Il est très important d'éviter efficacement les conflits avec d'autres rendus. De nombreux amis n'ont pas pu effectuer une rotation fluide, principalement pour cette raison.

Rotation autour d'un certain point
Le deuxième type consiste à faire pivoter l'image autour d'un certain point dans l'espace, ce qui deviendra plus compliqué. Mais pourquoi faire ça ? Dans de nombreux cas, vous devez faire pivoter un objet par rapport à un autre objet, et une seule rotation autour du centre ne peut pas répondre aux besoins. Et cette dernière est plus couramment utilisée. Par exemple, dans les jeux Web, la rotation est souvent utilisée.

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction onload() {   
2.     var canvas2 = document.getElementById('c2');   
3.     var ctx2 = canvas2.getContext('2d');   
4.     // rotation régulière autour d'un point   
5.     var image2 = nouveau Image();   
6.     image2.onload = fonction() {   
7.       // rotation régulière autour d'un point   
8.       var angle = 120 * Math.PI / 180 ; // angle de rotation en radians   
9.       var rx = 300, ry = 200 ; // la rotation x et y   
10.       var px = 300, py = 50 ; // les objets centrent x et y   
11.       var rayon = ry - py; // la différence dans y positions ou le rayon   
12.       var dx = rx   radius * Math.sin(angle); // le tirage x    
13.       var dy = ry - radius * Math.cos(angle); // le tirage y   
14.       ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);   
15.       ctx2.beginPath();   
16.       ctx2.arc(300,200,5,0,Math.PI*2,false);   
17.       ctx2.closePath();   
18.       ctx2.fillStyle = 'rgba(0,255,0,0.25)';   
19.       ctx2.fill();   
20.          
21.       ctx2.save();   
22.       ctx2.translate(dx, dy);   
23.       ctx2.rotate(angle);   
24.       ctx2.translate(-dx, -dy);   
25.       ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);   
26.       ctx2.restore();   
27.     }   
28.     image2.src = 'smallimage.png';   
29.   }  

Le code est simple et sa fonction est de faire pivoter une image de 120 degrés selon un point, ce qui rend l'image plus vivante.

Dessiner un logo magique
C'est un logo que j'ai vu sur Du Niang. J'ai intelligemment utilisé la transformation par rotation. J'ai utilisé un rectangle très simple et je l'ai transformé en un très beau logo grâce à la transformation par rotation. . Ce logo n'est-il pas très magique ? Les chaussures pour enfants utilisent leur cerveau et essaient de s'en rendre compte. Ci-dessous, fournissez le code que j'ai utilisé pour l'implémenter.

Code JavaScriptCopier le contenu dans le presse-papiers

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">fonction</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800 ;   </span></li> <li><span>        canvas.height = 600 ;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"><span>        context.fillRect(0,0,800,600);   </span></li> <li><span>  </span></li> <li class="alt"> <span>        </span><span class="keyword">pour</span><span>(</span><span class="keyword">var</span><span> i=1; i<=10; i ){   </span></li> <li><span>            context.save();   </span></li> <li class="alt"><span>            context.translate(400 300);   </span></li> <li><span>            context.rotate(36 * i * Math.PI / 180);   </span></li> <li class="alt"><span>            context.fillStyle = </span><span class="string">"rgba(255,0,0,0.25)"</span><span>;   </span></li> <li><span>            context.fillRect(0, -200, 200, 200);   </span></li> <li class="alt"><span>            context.restore();   </span></li> <li><span>        }   </span></li> <li class="alt"><span>    } ;   </span></li> <li><span></script>   

  

  

运行结果：

是不是非常的酷？就是让一个正放形，以屏幕中点（即初始正方形左下角顶点）为圆心进行旋转。

艺术是不是很美妙？大家一定以及体会到了Canvas的奇妙，简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大，没有什么是不可以实现的。所以，扬起咱们的艺术家的旗帜，加快步伐，继续前进！