Το αντικείμενο Canvas Ιδιότητες και μέθοδοι Μέρος Β’ Μάθημα 4 Το αντικείμενο Canvas Ιδιότητες και μέθοδοι Μέρος Β’
Εικόνα στο αντικείμενο 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)
Παράδειγμα var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); var img=document.getElementById(“imgbox"); contx.drawImage(img,10,10,50,50,10,10,150,180);
Θέματα ασφάλειας Προσοχή! Η HTML5 εισάγει πολιτικές με στόχο την προστασία πνευματικών δικαιωμάτων. Για να μπορέσουμε να παρέμβουμε σε περιεχόμενο πολυμέσων που εμφανίζουμε στο ιστότοπο μας θα πρέπει η πηγή του να είναι στο ίδιο domain με την ιστοσελίδα. Έτσι εάν θέλουμε να χρησιμοποιήσουμε στην ιστοσελίδα τις εντολές που προσφέρουν ανάγνωση και επεξεργασία των «imagedata» της εικόνας τότε θα πρέπει η αρχική θέση της εικόνας να είναι και αυτή στον ιστότοπο μας. Η πολιτικές αυτές εφαρμόζονται από τον browser και επομένως η εφαρμογή τους εξαρτάται από την πιστότητα υλοποίησης του HTML5 που υιοθετεί.
Παρεμβαίνοντας στο περιεχόμενο της εικόνας Method Περιγραφή createImageData() Δημιουργεί ένα νέο, κενό αντικείμενο ImageData getImageData() Επιστρέφει ένα αντικείμενο ImageData όπου αντιγράφει τα δεδομένα pixel για το συγκεκριμένο ορθογώνιο σε καμβά putImageData() Βάζει τα δεδομένα εικόνας (από ένα καθορισμένο αντικείμενο ImageData) πίσω πάνω στον καμβά width Επιστρέφει το πλάτος ενός αντικειμένου ImageData height Επιστρέφει το ύψος ενός αντικειμένου ImageData data Επιστρέφει ένα αντικείμενο που περιέχει τα δεδομένα της εικόνας ενός συγκεκριμένου αντικειμένου ImageData
Προγραμματίζοντας με τα Pixel του Canvas Η μέθοδος createImageData () δημιουργεί ένα νέο, κενό αντικείμενο ImageData. Το Data του ImageData περιέχει τιμές pixel του νέου αντικειμένου. Για κάθε pixel λοιπόν υπάρχουν τέσσερα διαδοχικές τιμές στον πίνακα ImageData με τις τιμές RGBA: R - Το κόκκινο χρώμα (0-255) G - Το πράσινο χρώμα (0-255) Β - Το μπλε χρώμα (0-255) A - Το κανάλι άλφα (0-255? 0 είναι αόρατο και 255 είναι πλήρως ορατό) Η προεπιλεγμένη τιμή για τα pixel του imageData είναι μια μαύρη εντελώς διάφανη εικόνα! Δηλαδή κάθε pixel δηλώνεται με μια τετραπλέτα που έχει τιμές (R,G,B,A) και το μαύρο διαφανές (0,0,0,0) δηλαδή αρχικά δεν δείχνει τίποτα!
Παράδειγμα χρήσης Για ένα κόκκινο τετράγωνο 200Χ200 πλήρως ορατό var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); var imgData=contx.createImageData(200,200); //μετράει από το 0 έως το μέγεθος της πληροφορίας της εικόνας δηλαδή 4 //φορές το μέγεθος της εικόνας ανεβαίνοντας ανά 4 for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=255; imgData.data[i+1]=0; imgData.data[i+2]=0; imgData.data[i+3]=255; } contx.putImageData(imgData,10,10);
Παράδειγμα αντιγραφής εικόνας <!DOCTYPE html> <html> <head> <title>Get and Put image data sample</title> <script> window.onload = function(){ // get first canvas and draw image var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(5, 5, 300, 250); ctx.stroke(); ctx.arc(150, 150, 100, 0, Math.PI, false); }
canvas.addEventListener("click", function (){ // get both canvases, and copy image var canvas2 = document.getElementById("YourCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // Get the context on the first canvas. var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Get image data from the first canvas. } if (canvas2.getContext) { var ctx2 = canvas2.getContext("2d"); // Get the context on the second canvas. ctx2.putImageData(imageData, 0, 0); // Put image data on the second canvas. },false); </script> </head> <body> <canvas id="MyCanvas" width="400" height="400" >This browser or document mode doesn't support canvas</canvas> <canvas id="YourCanvas" width="400" height="400">This browser or document mode doesn't support canvas</canvas> </body> </html>
Compositing Property Περιγραφή globalAlpha Ορίζει ή επιστρέφει την τρέχουσα άλφα ή τη διαφάνεια αξία του σχεδίου globalCompositeOpe ration Ορίζει ή επιστρέφει το πώς μια νέα εικόνα σύρεται πάνω σε μια υπάρχουσα εικόνα
Παράδειγμα <script> window.onload = function(){ var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.globalAlpha=0.5; //διαφάνεια contx.fillStyle="blue"; contx.fillRect(50,40,70,50); contx.fillStyle="red"; contx.fillRect(80,70,80,50); }; </script>
Παράδειγμα var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.fillStyle="red"; contx.fillRect(10,10,70,60); contx.globalCompositeOperation=“source-over"; contx.fillStyle="blue"; contx.fillRect(40,40,70,60); contx="red"; contx.fillRect(150,20,75,50); contx.globalCompositeOperation="destination-over"; contx.fillStyle="blue"; contx.fillRect(180,50,75,50);
Μετάδοση και αποθήκευση περιεχομένου εικόνας Method Περιγραφή createEvent() getContext() Επιστρέφει ένα αντικείμενο που παρέχει μεθόδους και τις ιδιότητες για την επεξεργασία στον καμβά toDataURL() URL αναπαράσταση της εικόνας με τη μορφή που καθορίζεται από παράμετρο type (προεπιλογή PNG). Η εικόνα είναι σε ανάλυση 96 dpi. παράδειγμα var dataURL = canvas.toDataURL(); document.getElementById("dataURL").innerHTML = "<b>dataURL:</b> " + dataURL;
Παράδειγμα ................ var dataURL = canvas.toDataURL(); document.getElementById(«theImg").src = dataURL; ............. …………… <canvas id="myCanvas" width="578" height="200"> </canvas> <p> Image: </p> <img id=“theImg" alt="Right click to save"> ................................
save/restore Η κατάσταση του canvas αποθηκεύονται σε μια στοίβα κάθε φορά που καλείται η μέθοδος save, και η τελευταία αποθηκευμένη κατάσταση επιστρέφεται από τη στοίβα κάθε φορά που καλείται η μέθοδος restore. save()* Αποθηκεύει την κατάσταση του τρέχοντος πλαισίου restore()* Επιστροφές προηγουμένως αποθηκευμένη κατάσταση ΚΑΤΑΣΤΑΣΗ είναι * Τα ισχύοντα transformation. * Η τρέχουσα περιοχή crop. * Οι τιμές από τα ακόλουθα χαρακτηριστικά: strokeStyle, FillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, γραμματοσειρά, textAlign, textBaseline. Η σημερινή πορεία και το τρέχον bitmap δεν αποτελούν μέρος του κρατικού σχεδίου. Η σημερινή διαδρομή είναι επίμονη, και μπορεί να ρυθμίζεται μόνο με τη χρήση της μεθόδου beginPath (). Η τρέχουσα bitmap είναι μια ιδιότητα του καμβά, όχι το πλαίσιο. context.save () push την τρέχουσα κατάσταση στη στοίβα. context.restore () Pops στην κορυφή στη στοίβα, και αποκαθιστά το περιβάλλον με αυτή την κατάσταση.
Παράδειγμα (opera safari) <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload function { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = ‘blue' ctx.fillRect(0,0,150,150); ctx.save(); ctx.fillStyle = ‘red' ctx.fillRect( 15,15,120,120); ctx.fillStyle = ‘green' ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); ctx.restore(); ctx.fillRect(45,45,60,60); } </script> </head> <body > <canvas id="mycanvas"></canvas> </body> </html>
https://developer. mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Manipulating_video_using_canvas