HTML5のキャンバスを使って画像の回転を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><title>画像の回転</title><script type="text/javascript"> // 画像 var img01 = null; // イメージ番号 var imgNum = 0; // 角度 var angle = 0; // 拡大率 var zoom = 1; // タイマー var timer = null; // キャンバス取得 var canvas = null; // コンテキスト var ctx = null; /* 画像の描画 */ function DrawImage() { // 描画中心 var posX = canvas.width / 2; var posY = canvas.height / 2; // 角度をラジアンに変換 var rad = angle * Math.PI / 180; // ハムスター var imgX = 0; var imgY = 0; var imgW = img01.width; var imgH = img01.height; var img = img01; var imgDrawW = imgW * zoom; var imgDrawH = imgH * zoom; var imgPosX = posX - imgDrawW / 2; var imgPosY = posY - imgDrawH / 2; // キャンバスのクリア ctx.fillStyle = '#FFFFFF'; ctx.fillRect( 0, 0, canvas.width, canvas.height ); // コンテキスト保存 ctx.save(); // 回転 ctx.setTransform( Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), posX - posX * Math.cos(rad) + posY * Math.sin(rad), posY - posX * Math.sin(rad) - posY * Math.cos(rad) ); // イメージの描画 ctx.drawImage( img , imgX // 画像上の描画開始位置X , imgY // 画像上の描画開始位置Y , imgW // 描画する画像の幅 , imgH // 描画する画像の高さ , imgPosX // 描画位置X , imgPosY // 描画位置Y , imgDrawW // 描画幅 , imgDrawH // 描画高さ ); // コンテキスト復元 ctx.restore(); } /* ページロード完了 */ function OnLoad() { /* 初期化 */ function OnInit() { // マウスイベントを受け取る canvas.addEventListener( "mousedown", function (e) { /* タップ位置の取得 FireFoxの場合は、offsetXとoffsetYがundefinedになる */ var posX = (e.offsetX !== undefined) ? e.offsetX : (e.layerX - e.target.offsetLeft); var posY = (e.offsetY !== undefined) ? e.offsetY : (e.layerY - e.target.offsetTop); // 画像の描画 DrawImage(); // 角度の変更 angle += 10; if (angle > 359) { angle = 0; } } ); // 画像の描画 DrawImage(); } // キャンバス取得 canvas = document.getElementById( "canvas" ); // コンテキストの取得 ctx = canvas.getContext('2d'); // キャンバスのクリア ctx.fillStyle = 'white'; ctx.fillRect( 0, 0, canvas.width, canvas.height ); /* イメージの読み込み */ { // 1枚目の読み込み img01 = new Image(); img01.onload = function () { // 初期化 OnInit(); }; img01.src = "./img/hidekiti.png"; } }</script></head><body bgcolor="#c0c0ff" onload="OnLoad()"> <h1>画像の回転</h1> <canvas width="300" height="240" id="canvas" style="background-color:black;"></canvas> <br /> 画像を回転させます。クリックすると画像が回転します。 <br /> <a href="../html5_list.html">戻る</a></body></html> |
