Περίεργο θέμα με canvas

rafinos · 1 Μαρτίου 2017

Στον παρακάτω κώδικα το τετράγωνο που εμφανίζεται γιατί δεν είναι τετράγωνο και είναι ορθογώνιο (μεγαλύτερο ως προς το ύψος) αλλά και αρκετά μεγαλύτερο από το κανονικό;

<html>
	<head>
		<meta charset="UTF-8">
		<style>
			canvas {
				height:500px;
				width:500px;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" tabindex="0"></canvas>
		</canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('myCanvas');
			canvas.focus();
			
			var context = canvas.getContext("2d");
 			context.fillRect(20, 20, 50, 50);
                </script>
        </body>
</html>

Σε περίπτωση όμως που το γράψω έτσι:

<canvas id="myCanvas" width="500" height="500" tabindex="0"></canvas>

Τότε το τετράγωνο είναι κανονικά μικρό και είναι τετράγωνο.

XPHSTOS_ · 2 Μαρτίου 2017

Χωρίς να είμαι 100% σίγουρος, με ένα quick search που έκανα, και μερικά tests ναι, πρέπει να είναι δηλωμένο inline το width / height ή έστω από την javascript.
Στα περισσότερα παραδείγματα που είδα ήταν δηλωμένο Inline.
Πάντως το παράδειγμα σου δουλεύει όπως το θες (με δήλωση στο sheet) αν δώσεις height το μισό απ'όσο θέλεις...
Αλλά δεν μου φαίνεται σωστό practice.

Καλύτερα δήλωνε από τη Javascript το widht/height.

k33theod · 2 Μαρτίου 2017

Ότι είπε ο XRHSTOS_

Μία απάντηση που ίσως σε καλύπτει είναι αυτή

At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. Indeed, the <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.

από https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

παπι · 2 Μαρτίου 2017

Το h/w στα attr ειναι οι διαστασεις του render buffer. Στα css ειναι οι διαστασεις του viewport. Εσυ ζωγραφιζεις στο render buffer ο οποιος γιναιται μαπ στο view port.

Βαλε στα css 500x500 και στο κανβα 1000χ1000 να εχεις ssaa x2.

Σύνδεση

Περίεργο θέμα με canvas

Προτεινόμενες αναρτήσεις

rafinos

XPHSTOS_

k33theod

παπι

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση