Η μέθοδος drawImage() του HTML canvas

Εγχειρίδιο αναφοράς HTML5 Canvas

Ορισμός και χρήση

drawImage() Ο τρόπος χρωματισμού εικόνας, πίνακα ή βίντεο στο canvas.

drawImage() Η μέθοδος μπορεί επίσης να σχεδιάσει κάποια μέρη της εικόνας και/ή να αυξήσει ή να μειώσει το μέγεθος της εικόνας.

Παράδειγμα

Παράδειγμα 1

Η εικόνα που θα χρησιμοποιηθεί:

τυλίπα

Εγγράφει την εικόνα στην κορυφή του canvas:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

Προσπάθησε να το δοκιμάσεις

Συμβουλή:Περισσότερες παραδείξεις παρέχονται στο κάτω μέρος της σελίδας.

Γλωσσική δομή

Γλωσσική δομή 1

Καθορίζει τη θέση της εικόνας στο canvas:

context.drawImage(img,x,y);

Γλωσσική δομή 2

Καθορίζει τη θέση της εικόνας στο canvas και ορίζει το πλάτος και το ύψος της εικόνας:

context.drawImage(img,x,y,width,height);

Γλωσσική δομή 3

Αποκόπτει την εικόνα και καθορίζει τη θέση του κομμένου μέρους στο canvas:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Τιμή παράμετρου

Παράμετροι Περιγραφή
img Καθορίζει την εικόνα, το canvas ή το βίντεο που θα χρησιμοποιηθεί.
sx Προαιρετικό. Η θέση x για την αρχή της κοπής.
sy Προαιρετικό. Η θέση y για την αρχή της κοπής.
swidth Προαιρετικό. Το πλάτος της κομμένης εικόνας.
sheight Προαιρετικό. Το ύψος της κομμένης εικόνας.
x Η θέση x του εικόνας στο canvas.
y Η θέση y του εικόνας στο canvas.
width Προαιρετικό. Το πλάτος της εικόνας που θα χρησιμοποιηθεί. (Εκτενεί ή συρρικνώνει την εικόνα)
height Προαιρετικό. Το ύψος της εικόνας που θα χρησιμοποιηθεί. (Εκτενεί ή συρρικνώνει την εικόνα)

Περισσότερες παραδείξεις

Παράδειγμα 2

Καθορίζει τη θέση της εικόνας στο canvas και ορίζει το πλάτος και το ύψος της εικόνας:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

Προσπάθησε να το δοκιμάσεις

Παράδειγμα 3

Αποκόπτε την εικόνα και καθορίζει τη θέση του κομμένου μέρους στο canvas:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

Προσπάθησε να το δοκιμάσεις

Παράδειγμα 4

Το βίντεο που θα χρησιμοποιηθεί (πατήστε το κουμπί play για να ξεκινήσετε την παράσταση):

Canvas:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

JavaScript (κάθε 20 χιλιοστόλιτρο, το κώδικας θα σχεδιάσει το τρέχον кадρό του βίντεο):

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Προσπάθησε να το δοκιμάσεις

Υποστήριξη περιηγητών

Τα αριθμήματα στη τаблицή σημειώνουν την έκδοση του πρώτου προγράμματος που υποστηρίζει αυτήν την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:O Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.

Εγχειρίδιο αναφοράς HTML5 Canvas