Υποενότητα 10.1: Στοιχείο HTML Canvas
Site: | ΕΛ/ΛΑΚ Moodle |
Course: | Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου |
Book: | Υποενότητα 10.1: Στοιχείο HTML Canvas |
Printed by: | Guest user |
Date: | Friday, 13 December 2024, 6:57 AM |
Description
- Κείμενο
- Σχήμα
- Εικόνα
Τι είναι το Στοιχείο 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
- Ανοίξτε το αρχείο
exersice10.1.html
στον φάκελο "Exercises" στον επεξεργαστή κώδικα. - Προσθέστε έναν κύκλο - circle στον πρώτο καμβά και αποθηκεύστε το αρχείο. Η έξοδος του προγράμματος περιήγησης πρέπει να είναι όπως φαίνεται στην παρακάτω εικόνα:
/*add a circle*/
context0.beginPath();
context0.arc(300,200,100,0,2*Math.PI);
context0.stroke();