HTML canvas scale() method
Definition and usage
scale() method to zoom the current drawing, larger or smaller.
Σημείωση:If you zoom the drawing, all subsequent drawings will also be zoomed. The positioning will also be zoomed. If you write scale(2,2)Then the drawing will be positioned twice as far from the top left corner of the canvas.
Instance
Example 1
Draw a rectangle, zoom to 200%, and then draw another rectangle again:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Tip:More examples are provided at the bottom of the page.
Syntax
context.scale(scalewidth,scaleheight);
Parameter value
| Parameter | Description |
|---|---|
| scalewidth | Zoom the current drawing width (1=100%, 0.5=50%, 2=200%, etc.). |
| scaleheight | Zoom the current drawing height (1=100%, 0.5=50%, 2=200%, etc.). |
Περισσότερα παραδείγματα
Παράδειγμα 2
Δημιουργία ενός ορθογώνιου; Αgrandissement à 200%, πάλι δημιουργία ορθογώνιου; Αgrandissement à 200%, puis à nouveau création d'un rectangle; Agrandissement à 200%, puis à nouveau création d'un rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Υποστήριξη προγράμματος περιήγησης
Τα αριθμήματα στη τάβλη αναφέρονται στην έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:Το Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.
