Códigos da Aula 9
<!DOCTYPE html>
<html>
<head>
<title>Spritesheet - recorte e enquadramento (clipping)</title>
</head>
<body>
<canvas id="canvas_clipping" width="500" height="500"></canvas>
<script>
var imgSonic = new Image();
imgSonic.src = 'spritesheet.png';
imgSonic.onload = function() {
// Passo estes valores conforme a minha spritesheet
var linhas = 3;
var colunas = 8;
// Dimensão de cada quadro
var largura = imgSonic.width / colunas;
var altura = imgSonic.height / linhas;
// Quadro que eu quero (expresso em linha e coluna)
var queroLinha = 2;
var queroColuna = 7;
// Posição de recorte
var x = largura * queroColuna;
var y = altura * queroLinha;
// Desenhando no Canvas
var context =
document.getElementById('canvas_clipping').getContext('2d');
context.drawImage(
imgSonic,
x,
y,
largura,
altura,
50, // Posição no canvas onde quero desenhar
50,
largura,
altura
);
}
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário