Υποενότητα 10.1: Στοιχείο HTML Canvas

Τι είναι το Στοιχείο HTML Canvas

Το Στοιχείο HTML Canvas ή απλά ο καμβάς είναι ακριβώς αυτό που υπονοεί το όνομα-είναι ένας χώρος όπου σχεδιάζετε (και επεξεργάζεστε) και τις εικόνες και το κείμενο. Ειδικά, με τους όρους εικόνες και κείμενο, εννοούμε την αναπαράστασή τους ως bitmap - εικονοστοιχεία που δημιουργούν την εικόνα στην οθόνη.

Φανταστείτε τον καμβά ως χώρο εργασίας. Το όνομά του, "καμβάς", μας θυμίζει το φύλλο ζωγραφικής. Ωστόσο, θα ήταν καλύτερο να το φανταστούμε σαν ένα στερεό πλάισιο που στηρίζει το φύλλο καμβά. Για να σχεδιάσετε πραγματικά, χρειάζεστε μια επιφάνεια. Αυτή η επιφάνεια είναι το   canvasRenderingContext2D, στο οποίο εργαζόμαστε.

Το HTML του Canvas

Είναι εύκολο να δημιουργήσετε καμβά σε μια ιστοσελίδα:

<canvas id="canvas0"
   width="600"
   height="400">
 </canvas>

Αν δεν συμπεριλάβετε τις δαιστάσεις, το πλάτος και το ύψος του καμβά θα είναι από προεπιλογή 300x150 (Width x Height).

Στον Καμβά μπορείτε επίσης να προσθέσετε CSS:

<style>
    canvas { border: 1px solid blue;}
</style>

Οι παραπάνω κανόνες CSS θα εμφανίσουν τον εξής καμβά:

CanvasRenderingContext2D

Χρειαζόμαστε το CanvasRenderingContext2D tγια να δημιουργήσουμε μια επιφάνεια στην οποία μπορούμε να εργαστούμε.

Τα βήματα για τη χρήση του CanvasRenderingContext2D είναι:

var canvas0 = document.getElementById("mycanvas0");
var context0= canvas.getContext('2d'); 
/* context0= will be your context */

Χρειάζεται μόνο να το κάνετε αυτό μία φορά και στη συνέχεια μπορείτε να συνεχίσετε να το χρησιμοποιείτε για να κάνετε όλο το σχέδιό σας.

Στο επόμενο μάθημα, θα χρησιμοποιήσουμε αυτήν την επιφάνεια για να αρχίσουμε να σχεδιάζουμε.

Κείμενο στο Canvas

Θα ξεκινήσουμε μαθαίνοντας πώς να σχεδιάζουμε κείμενο σε καμβά.

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

• font - ορίζει τις ιδιότητες γραμματοσειράς για το κείμενο
• fillText(text,x,y) - σχεδιάζει "με γέμισμα- filled" κείμενο στον καμβά
• strokeText(text,x,y) - σχεδιάζει κείμενο στον καμβά (χωρίς γέμισμα)
• fillStyle - Ορίζει ή επιστρέφει το χρώμα, την κλίση-gradient ή το μοτίβο-patterm που χρησιμοποιείται για να γεμίσει το σχέδιο

Ο κώδικας JavaScript:

context0.fillStyle = "blue";
context0.font = "3em Calibri";
context0.fillText("My TEXT!", 30, 110); /*use strokeText instead of fillText to see the difference*/

θα δημιουργήσει καμβά που εμφανίζεται ως

Σχήματα στο Canvas

Εδώ θα αρχίσουμε να σχεδιάζουμε πραγματικά στον καμβά μας. Το πρώτο βήμα είναι να μάθουμε πώς να σχεδιάζουμε μια γραμμή.

Ο κώδικας JavaScript που θα χρειαστεί για αυτό είναι:

/* draw lines between opposite corners to make an X: */
/*Let's set some styles */
context0.strokeStyle = "red";
context0.lineWidth = "2";
/* call beginPath() to start the drawing path*/
context0.beginPath();
/* call moveTo() to position the pen at the starting point at one corner*/
context0.moveTo(0, 0);
/* call lineTo() to define a line to the opposite corner*/
context0.lineTo(context0.canvas.width, context0.canvas.height);
/* call moveTo() to position the pen at the starting point at one corner*/
context0.moveTo(context0.canvas.width, 0);
/* call lineTo() to define a line to the opposite corner*/
context0.lineTo(0, context0.canvas.height);
/* call stroke() to draw it */
context0.stroke();

τα παραπάνω θα δημιουργήσουν δύο γραμμές που εμφανίζονται ως "Χ" στον καμβά μας:

Εικόνα στο Canvas

Μπορούμε επίσης να προσθέσουμε και να επεξεργαστούμε εικόνες σε καμβά.

Ο κώδικας JavaScript για να επιτευχθεί αυτό είναι:

/*
* We create a Javascript Image object and set its source URL
* to the location of the image file we'll be inserting.
*/
var image0 = new Image();
image0.src = "images/chocolatethings.JPG";
/*
* Here's the handler that loads when the image has finished downloading.
*
* This needs to be asynchronous (triggered by the image load event) since we don't know how
* long the image will take to load.
*/
image0.onload = function(){
    /* draw the image in the canvas window */
    context1.drawImage(image0, 0, 0);
}

ο παραπάνω κώδικας θα δημιουργήσει έναν καμβά που εμφανίζεται ως εξής:

Άσκηση

Ας δημιουργήσουμε ένα αρχείο HTML που περιλαμβάνει τα εξής:

<!DOCTYPE html>
<html lang="en">
  <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Canvas HTML element </title>
       <style>
           canvas { border: 1px solid blue;}
       </style>
   </head>
   <body >
       <h3>Canvas HTML element </h3>
       <canvas id="myCanvas0" height="400" width="600"></canvas>
       <canvas id="myCanvas1" height="400" width="600"></canvas>
 
       <script>
            /* We'll grab the canvas elements and the graphics contexts here*/
            var canvas0 = document.getElementById("myCanvas0"); /* HTMLCanvasElement */
            var context0 = canvas0.getContext('2d'); /* CanvasRenderingContext2D */
            var canvas1 = document.getElementById("myCanvas1"); /* HTMLCanvasElement */
            var context1 = canvas1.getContext('2d'); /* CanvasRenderingContext2D */
 
            /* Let's add some text*/
            context0.fillStyle = "blue";
            context0.font = "3em Calibri";
            context0.fillText("My TEXT!", 30, 110); /*use strokeText instead of fillText to see the difference*/
 
            /* draw lines between opposite corners to make an X: */
            /* Let's set some styles */
            context0.strokeStyle = "red";
            context0.lineWidth = "2";
            /* call beginPath() to start the drawing path*/
            context0.beginPath();
            /* call moveTo() to position the pen at the starting point at one corner*/
            context0.moveTo(0, 0);
            /* call lineTo() to define a line to the opposite corner*/
            context0.lineTo(context0.canvas.width, context0.canvas.height);
            /* call moveTo() to position the pen at the starting point at one corner*/
            context0.moveTo(context0.canvas.width, 0);
            /* call lineTo() to define a line to the opposite corner*/
            context0.lineTo(0, context0.canvas.height);
            /* call stroke() to draw it */
            context0.stroke();
           /*
            * We create a Javascript Image object and set its source URL
            * to the location of the image file we'll be inserting.
            */
            var image0 = new Image();
            image0.src = "images/chocolatethings.JPG";
            /* Here's the handler that loads when the image has finished downloading. */
            image0.onload = function(){
                         /* draw the image in the canvas window */
                          context1.drawImage(image0, 0, 0);
            }
       </script>
   </body>
</html>

Tip: Αντιγράψτε το παραπάνω κομμάτι κώδικα και επικολλήστε τον απευθείας στον επεξεργαστή κώδικα. Αποθηκεύστε το αρχείο ως exersice10.1.html στον φάκελο "Exercises",για να δείτε πώς λειτουργεί. Αν δεν μπορείτε να βρείτε την εικόνα  chocolatethings.JPG στον φάκελοr exercises/images, πρέπει να την αντιγράψετε από το φάκελο chocolate/images.

Περισσότερες πληροφορίες: https://www.w3schools.com/graphics/canvas_intro.asp

Exercise

1. Ανοίξτε το αρχείο exersice10.1.html στον φάκελο "Exercises" στον επεξεργαστή κώδικα.
2. Προσθέστε έναν κύκλο -  circle στον πρώτο καμβά και αποθηκεύστε το αρχείο. Η έξοδος του προγράμματος περιήγησης πρέπει να είναι όπως φαίνεται στην παρακάτω εικόνα:

Λύση:

/*add a circle*/
context0.beginPath();
context0.arc(300,200,100,0,2*Math.PI);
context0.stroke();