HTML5 Canvas API を使用してグラフィックスを操作する方法を説明する例 回転_html5 チュートリアル スキル

私は Web 開発者として、HTML5 の Canvas 要素を扱ってきました。画像のレンダリングは非常に重要で一般的に使用される大きな分岐であるため、今日のチュートリアルは、キャンバス画像の表示と画像の回転方法についてです。

一般に、キャンバスを回転するには、中心回転と基準点回転の 2 つの方法があります。回転機能を上手に活用すれば、開発作業に大いに役立ちます。

オブジェクトの中心の回転について
最初のタイプの回転では、オブジェクトをその中心を中心に回転させることを考えます。最も単純なタイプの回転である Canvas 要素を使用して実装されます。実験の素材としてゴリラの写真を使いました。
基本的な考え方は、中心点を中心にキャンバスを回転し、キャンバスを回転してから、キャンバスを元の位置に戻す必要があるということです。グラフィックス エンジンの経験があれば、これには馴染みがあるはずです。コードはおそらく次のようになります: (クリックして効果を確認します)

JavaScript コードコンテンツをクリップボードにコピーします

1. 関数 onload() {
2. var Canvas = document.getElementById('c1');
3. var ctx1 = Canvas.getContext('2d');
var
4. image1 = new Image(); image1.onload = function
() {
5. // 中心を中心とした定期的な回転
6. var
xpos = Canvas.width/2;
7. var ypos = Canvas.height/2;
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
8. ctx1.save(); ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);
9. //47 度回転
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
12. ctx1.restore(); }
image1.src =
13. 'image.png'
;
14. }

15. 

    コメントはすでに非常に詳細に書かれていますが、まだ 1 つだけ言及したいことがあります。それは .save() と .restore() です。その目的は、キャンバスを回転前の状態で保存し、回転後に復元することです。他のレンダリングとの競合を効果的に回避することが非常に重要です。主にこの理由により、多くの友人がスムーズに回転できませんでした。

    特定の点を中心に回転
    2 番目のタイプは、空間内の特定の点を中心に画像を回転するものですが、これはより複雑になります。しかし、なぜこれを行うのでしょうか?多くの場合、別のオブジェクトを参照してオブジェクトを回転する必要がありますが、中心を中心とした 1 回の回転ではニーズを満たすことができません。たとえば、Web ゲームでは後者がよく使用されます。

    
    JavaScript コードコンテンツをクリップボードにコピーします

    1. 関数 onload() {
    2. var canvas2 = document.getElementById('c2');   
    3. var ctx2 = canvas2.getContext('2d');   
    4. // 点
    を中心とした定期的な回転
    5. var image2 = new Image();   
    6. image2.onload = 関数() {
    7. // 点を中心とした定期的な回転
    8. var angle = 120 * Math.PI / 180; // 回転角度（ラジアン）
    9. var rx = 300、 ry = 200; // 回転 x および y
    10. var px = 300, py = 50; // オブジェクトの中心 x と y
    11. var radius = ry - py; // y 位置の差 または 半径
    12. var dx = rx radius * Math.sin(angle); // ドロー x
    13. var dy = ry - radius * Math.cos(angle); // ドロー 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();   
    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. }

    

    コードはシンプルで、その機能は、点に応じて画像を 120 度回転し、画像をより鮮明にすることです。

    魔法のロゴを描く
    これはDu Niangで見たロゴです。非常に単純な長方形を回転変換によって非常に美しいロゴに変換しました。 。このロゴはとても幻想的だと思いませんか？子ども靴は頭を使って実現しようとします。以下に、実装に使用したコードを示します。

    JavaScript コードコンテンツをクリップボードにコピーします

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

      
17. <スクリプト>   
18. window.onload = 関数(){
19. var canvas = document.getElementById("canvas");   
20. canvas.width = 800;   
21. canvas.height = 600;   
22. var context = canvas.getContext("2d");   
23. context.fillStyle = "#FFF";   
24. context.fillRect(0,0,800,600);   
26. for(var i=1; i<=10; i ){
27. context.save();   
28. context.translate(400,300);   
29. context.rotate(36 * i * Math.PI / 180);   
30. context.fillStyle = "rgba(255,0,0,0.25)";   
31. context.fillRect(0, -200, 200, 200);   
32. context.restore();   
33. }
34. };   
35.   
36.   
37.   

运行結果：

は必ずしも異常な酷さではありませんか? この図の形式を分析すると、非常に単一的であることが判明しました。つまり、画面の中心 (つまり、最初の正方形の左下角の点) を中心に回転していることがわかります。

アプローチは、超美妙ではありませんか? 大家および人々が Canvas の奇妙に到達し、単純な単一の実行コードで最大限の効果を実現できます。