GARANTIR DESCONTO

Fórum HTML5 Canvas: Imagem esticada #483710

26/06/2014

0

Front-end

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

Claudio Aguiar

Responder

Post mais votado

26/06/2014

Pra ficar mais claro, seria o seguinte:
<canvas id="teste_canvas" width="850" height="350"></canvas>

Joel Rodrigues

Joel Rodrigues
Responder

Gostei + 1

Mais Posts

26/06/2014

Joel Rodrigues

Claudio, como você está definindo as dimensões do seu elemento canvas?
Responder

Gostei + 0

26/06/2014

Claudio Aguiar

Estou setando a largura e altura com CSS.

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>
Responder

Gostei + 0

26/06/2014

Joel Rodrigues

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>.
Responder

Gostei + 0

26/06/2014

Raphael Souza

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?
Responder

Gostei + 0

26/06/2014

Joel Rodrigues

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.
Responder

Gostei + 0

26/06/2014

Claudio Aguiar

Raphael, olha o print

[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140626-180954.jpg[/img]
Responder

Gostei + 0

26/06/2014

Claudio Aguiar

Pra ficar mais claro, seria o seguinte:
<canvas id="teste_canvas" width="850" height="350"></canvas>


Joel, melhorou consideravelmente.
Responder

Gostei + 0

26/06/2014

Joel Rodrigues

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.
Responder

Gostei + 0

26/06/2014

Claudio Aguiar

então no caso do canvas, mexer apenas nas propriedades dele mesmo. é o mais correto?
Responder

Gostei + 0

27/06/2014

Joel Rodrigues

Neste caso sim, até porque a maior parte das coisas são feitas com JavaScript.
Responder

Gostei + 0

27/06/2014

Claudio Aguiar

"pera aew, o canvas faz parte do html 5, não é? o javascript interfere ou o css?"

editando, desculpa, eu entendi!!! hehehe
Responder

Gostei + 0

27/06/2014

Joel Rodrigues

Valeu então, Claudio. Fico feliz por ter ajudado.
Responder

Gostei + 1

27/06/2014

Raphael Souza

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.


Ah sim!! Entendi =)
Responder

Gostei + 0

28/06/2014

Claudio Aguiar

valeu, abraço.
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar