From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../imagesmoothingenabled/index.html | 181 +++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html (limited to 'files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html') diff --git a/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html new file mode 100644 index 0000000000..f4d86f8c60 --- /dev/null +++ b/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -0,0 +1,181 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

Η ιδιότητα CanvasRenderingContext2D.imageSmoothingEnabled του Canvas 2D API μπορεί να καθοριστεί για να αλλάξει αν οι εικόνες θα είναι λείες (true, προεπιλογή) ή όχι (false). Όταν ζητηθεί η ιδιότητα imageSmoothingEnabled, επιστρέφει την τελευταία τιμή που καθορίστικε.

+ +

Αυτή η ιδιότητα είναι χρήσημη για παιχνίδια με θέμα pixel-art, όταν ο καμβάς κλιμακώνεται για παράδειγμα. Ο προεπιλεγμένος αλγόριθμος κλιμάκωσης μπορεί να δημιουργίσει θολά εφέ, και να καταστρέψει τα εικονοστοιχεία. Σε αυτή την περίπτωση ορίστε αυτή την ιδιότητα σε false. Δείτε επίσης την ιδιότητα CSS {{cssxref("image-rendering")}}.

+ +

Σύνταξη

+ +
ctx.imageSmoothingEnabled = value;
+ +

Επιλογές

+ +
+
value
+
Ένα {{jsxref("Boolean")}} που δείχνωντας αν θα είναι λείες οι εικόνες ή όχι.
+
+ +

Παραδείγματα

+ +

Χρησιμοποιώντας την ιδιότητα imageSmoothingEnabled

+ +

Αυτό είναι ένα απλό απόσπασμα κώδικα που χρησιμοποιά την ιδιότητα imageSmoothingEnabled με μία κλιμακωμένη εικόνα.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+};
+
+ +

Επεξεργάστε τον παρακάτω κώδικα και δείτε ζωντανά τις αλλαγές σας στον καμβά:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+ +

Προδιαγραφές

+ + + + + + + + + + + + + + +
ΠροδιαγραφήΚατάστασηΣχόλιο
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}} 
+ +

Συμβατότητα προγραμμάτων περιήγησης

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ΧαρακτηριστικόChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support30 [1]{{ CompatVersionUnknown() }}
+ {{property_prefix("moz")}}
+ {{ CompatGeckoDesktop(51)}}
{{ CompatVersionUnknown() }}
+ {{property_prefix("ms")}}
{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ΧαρακτηριστικόAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+ {{property_prefix("moz")}}
+ {{ CompatGeckoMobile(51)}}
{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Υποστηρίζεται με webkit prefix μέχρι την έκδοση 29.

+ +

Δείτε επίσης

+ + -- cgit v1.2.3-54-g00ecf