Κατέβασμα παρουσίασης
Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε
1
Το αντικείμενο Canvas Βίντεο
Μάθημα 5 Το αντικείμενο Canvas Βίντεο
2
Εικόνα στο αντικείμενο CANVAS
Method Περιγραφή drawImage() Σχεδιάζει μια εικόνα, καμβά, ή βίντεο επάνω στον καμβά παράμετροι img Καθορίζει την εικόνα, ή στοιχείου βίντεο για να χρησιμοποιήσετε sx Optional. Η x συντεταγμένη πού θα αρχίσετε το κόψιμο (clip) (η περιοχή της εικόνας που θα δει ο χρήστης είναι η περιοχή που περιγράφεται στο clip) sy Optional. Η y συντεταγμένη πού θα αρχίσετε το κόψιμο (clip) swidth Optional. Το πλάτος της περιοχής που θα κάνουμε clip το image sheight Optional. Το ύψος της περιοχής που θα κάνουμε clip το image x Το x του σημείου που θα τοποθετήσουμε το image στον Canvas y Το y του σημείου που θα τοποθετήσουμε το image στον Canvas width Optional. Το πλάτος του image (αν χρειαστεί θα παραμορφωθεί η εικόνα stretch ή reduce) height Optional. The Το ύψος του image (αν χρειαστεί θα παραμορφωθεί η εικόνα stretch ή reduce)
3
Ιδιότητες του video element
4
Κάποια γενικότερα H setTimeout() method καλεί μια συνάρτηση μετά από κάποια miliseconds που προσδιορίζουμε στην κλήση της εντολής H setInterval() method καλεί μια συνάρτηση κάθε ένα συγκεκριμένο αριθμό από milliseconds. H setInterval() θα συνεχίσει να εκτελείτε μέχρι να εκτελεστεί η εντολή clearInterval() ή να κλείσει το παράιθυρο Το ID value που επιστρέφει η setInterval() χρησιμοποιείται ως παράμετρο εισόδου για το clearInterval().
5
Παράδειγμα αναπαραγωγής βίντεο
<!DOCTYPE html> <html> <body> <p>Αρχικό Video :</p> <video id="video1" controls width="270" autoplay> <source src=“small.mp4" type='video/mp4'> <source src=“small.ogg" type='video/ogg'> <source src=“small.webm" type='video/webm'> </video> <canvas id="myCanvas" width=“300" height=“150" style="border:1px solid #d3d3d3;"> </canvas> <script> var thevideo = document.getElementById("video1"); var thecanvas = document.getElementById("myCanvas"); ctx = thecanvas.getContext("2d"); thevideo.addEventListener("play", function() {var i = window.setInterval(function() {ctx.drawImage(thevideo,5,5,260,125)},20);}, false); thevideo.addEventListener("pause", function() {window.clearInterval(i);}, false); thevideo.addEventListener("ended", function() {clearInterval(i);}, false); </script> </body> </html>
6
Ένα παράδειγμα μόνο για Mozilla
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); Let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0);
7
Διάφορα παραδείγματα
Παρόμοιες παρουσιάσεις
