HTML5 Canvas: Imagem esticada
Tenho um elemento canvas e estou desenhando uma imagem com JavaScript, mas quando abro a página, a imagem está aparecendo toda esticada. alguem ja passou por isso, conseguiu resolver, como?
Claudio Aguiar
Curtidas 0
Melhor post
Joel Rodrigues
26/06/2014
Pra ficar mais claro, seria o seguinte:
<canvas id="teste_canvas" width="850" height="350"></canvas>
GOSTEI 1
Mais Respostas
Joel Rodrigues
26/06/2014
Claudio, como você está definindo as dimensões do seu elemento canvas?
GOSTEI 0
Claudio Aguiar
26/06/2014
Estou setando a largura e altura com CSS.
olha o codigo
olha o codigo
<!doctype html>
<html>
<head>
<title>Testando Canvas - Imagem</title>
<style>
#teste_canvas{
width:850px;
height:350px;
}
</style>
</head>
<body>
<canvas id="teste_canvas"></canvas>
<script type="text/javascript" src="teste_bola.js"></script>
</body>
</html>
GOSTEI 0
Joel Rodrigues
26/06/2014
Claudio, eu imagino que o problema que você está enfrentando se dá devido ao uso de CSS para dimensionar a canvas. Experimente remover esse estilo e definir os atributos width e height direto na tag <canvas>.
GOSTEI 0
Raphael Souza
26/06/2014
Claudio, eu imagino que o problema que você está enfrentando se dá devido ao uso de CSS para dimensionar a canvas. Experimente remover esse estilo e definir os atributos width e height direto na tag <canvas>.
Joel, ele colocar o style inline no elemento canvas ou no css pelo ID #teste_canvas dá na mesma. O estilo será aplicado exatamente da mesma forma.
Claudio, como define o "esticado"? Tem como mostrar um print?
GOSTEI 0
Joel Rodrigues
26/06/2014
Opa, Rafael.
Na verdade eu falei para ele remover o CSS e usar os atributos width e height da tag, não colocar o atributo style inline.
Abraço.
Na verdade eu falei para ele remover o CSS e usar os atributos width e height da tag, não colocar o atributo style inline.
Abraço.
GOSTEI 0
Claudio Aguiar
26/06/2014
Raphael, olha o print
[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140626-180954.jpg[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140626-180954.jpg[/img]
GOSTEI 0
Claudio Aguiar
26/06/2014
Pra ficar mais claro, seria o seguinte:
<canvas id="teste_canvas" width="850" height="350"></canvas>
Joel, melhorou consideravelmente.
GOSTEI 0
Joel Rodrigues
26/06/2014
Imaginei, Claudio. Também passei por isso quando comecei a usar o canvas. Isso ocorre porque quando você usa CSS, na verdade o sistema de eixos coordenados é "esticado", assim as medidas aumentam proporcionalmente.
GOSTEI 0
Claudio Aguiar
26/06/2014
então no caso do canvas, mexer apenas nas propriedades dele mesmo. é o mais correto?
GOSTEI 0
Joel Rodrigues
26/06/2014
Neste caso sim, até porque a maior parte das coisas são feitas com JavaScript.
GOSTEI 0
Claudio Aguiar
26/06/2014
"pera aew, o canvas faz parte do html 5, não é? o javascript interfere ou o css?"
editando, desculpa, eu entendi!!! hehehe
editando, desculpa, eu entendi!!! hehehe
GOSTEI 0
Joel Rodrigues
26/06/2014
Valeu então, Claudio. Fico feliz por ter ajudado.
GOSTEI 1
Raphael Souza
26/06/2014
Opa, Rafael.
Na verdade eu falei para ele remover o CSS e usar os atributos width e height da tag, não colocar o atributo style inline.
Abraço.
Na verdade eu falei para ele remover o CSS e usar os atributos width e height da tag, não colocar o atributo style inline.
Abraço.
Ah sim!! Entendi =)
GOSTEI 0
Claudio Aguiar
26/06/2014
valeu, abraço.
GOSTEI 0