背景： レイキャスターを作っていますが、よく作っていました。しかし、私は少しそれを変更することを決めた。私は、レイキャスターの作成に着手し始め、ちょうど一連のピクセルを移動するのではなく、単にアイコンを表示してストレッチ/スキューするのがずっと簡単だと決めました。javascriptを使ってスプライトシートからスプライトを拡大/伸縮/スキューする方法はありますか？
私の質問は： javascriptを使ってスプライトシートからスプライトを拡大/伸縮/スキューする方法はありますか？
私は基本的にスプライト画像から16px x 16pxの画像を取得し、それを配置し、拡大縮小し、回転し、javascriptで歪めたいと考えています。それをどうやってやりますか？
私は実際に3Dを使用せずに3D空間内を移動する3Dブロックの印象を与えるために、そのイメージの3つのバージョンを接続することを考えていました。
CSS3 transformで行うことができます。または、隠しキャンバス要素を使用してtransformationを適用し、それをメインキャンバスに描画します。
キャンバスにdrawImage関数を使用すると、これを実現できます。次の例では、40x100スプライトを倍精度80x200サイズにスケールします。
<html>
<body>
<canvas id="canvas" width=80 height=200>
<script language="JavaScript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'http://gamemedia.wcgame.ru/data/2011-07-17/game-sprite-sheet.jpg';
img.onload = function() {
// (image, sx, sy, sw, sh, dx, dy, dw, dh)
ctx.drawImage(img,0,0,40,100,0,0,80,200);
}
}
draw();
</script>
</body>
</html>
おそらく最も簡単な方法は、background-sizeのcssプロパティを使用することです。最新のブラウザ（IE 9+、FF4 +、Safari4 +、Chrome3 +）、それをサポートとして次のことができます。
HTML：
<div id="mySprite">
</div>
CSS：
#mySprite{
height: 80px; /* 64px * 1.25 */
width: 80px; /* 64px * 1.25 */
background-image:url(my.png);
background-position: -0px -560px; /* pick specific one at -448px * 1.25 */
background-size:640px 640px; /* scale image to 512px * 1.25 */
}
spritesheetが持つスプライトを持っていますサイズは64x64pxで、80x80pxに拡大します。 @Prusseが言ったようにhttp://jsfiddle.net/Zgr5w/1/
：あなたもtransform: scale()を使用することができますが、それはいくつかの欠点があります：ブラウザのサポート、追加の位置変換、他の要素とのアライメントが破損するおそれ：
#mySprite{
height: 64px;
width: 64px;
background-image:url(my.png);
background-position: -0px -448px;
transform:scale(1.25);
/* additional to compensate the position shift */
position:relative;
top:10px;
left:10px;
}
を見る はここに実際の例を参照してください。上記の2つのアプローチのライブの例はここにあります：http://jsfiddle.net/Zgr5w/1/
偉大な答え、例1のあなたのコメントは非常に便利です。 – jedierikb
私は実際に考えにキャンバスを取っていませんでした！ありがとう！ ：D – Tgwizman