Μέθοδος drawImage() του Canvas

Οδηγός reference για Canvas

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

drawImage() Η μέθοδος ζωγραφίζει εικόνες, canvas ή βίντεο στο canvas.

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

Παράδειγμα

Παράδειγμα 1

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

tulipa

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

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

JavaScript:

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

Δοκιμάστε το προσωπικά

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

Γραμματική

Γλώσσα JavaScript 1

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

κείμενο.drawImage(img,x,y);

Γλώσσα JavaScript 2

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

κείμενο.drawImage(img,x,y,width,height);

Γλώσσα JavaScript 3

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

κείμενο.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 και καθορίζει το πλάτος και το ύψος της εικόνας:

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

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:

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

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

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

Canvas:

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

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

Οδηγός reference για Canvas