Μάθημα 6 Μετασχηματισμοί στο αντικείμενο Canvas. Μετασχηματισμοί / transforms Method Περιγραφή scale()Κλιμάκωση. Το τρέχον σχέδιο γίνεται μεγαλύτερο ή.

Παρουσίαση με θέμα: "Μάθημα 6 Μετασχηματισμοί στο αντικείμενο Canvas. Μετασχηματισμοί / transforms Method Περιγραφή scale()Κλιμάκωση. Το τρέχον σχέδιο γίνεται μεγαλύτερο ή."— Μεταγράφημα παρουσίασης:

1 Μάθημα 6 Μετασχηματισμοί στο αντικείμενο Canvas

2 Μετασχηματισμοί / transforms Method Περιγραφή scale()Κλιμάκωση. Το τρέχον σχέδιο γίνεται μεγαλύτερο ή μικρότερο rotate()Περιστρέφει το τρέχον σχέδιο translate()Επαναθέτει το (0,0) σε μια θέση στον καμβά transform()Αντικαθιστά την τρέχουσα μήτρα μετασχηματισμού για το σχέδιο setTransform()Θέτει μήτρα μετασχηματισμού. See wiki: http://en.wikipedia.org/wiki/Transformation_matrix http://en.wikipedia.org/wiki/Transformation_matrix

3 Μετακίνηση / Translation translate(dx,dy)Επαναθέτει το (0,0) σε μια θέση στον καμβά μετακινούμενο κατά dx, dy Απλή μετακίνηση

4 Παράδειγμα Your browser is not HTML5 compatible. var c = document.getElementById("myCanvas"); var contx = c.getContext("2d"); contx.fillRect(10, 10, 100, 50); contx.translate(70, 70); contx.translate(10, 10); contx.fillRect(10, 10, 100, 50);

5 Περιστροφή / Rotation Theta: γωνία σε rad. Για τη μετατροπή των μοιρών (degrees) σε rad theta=μοίρες*Math.PI/180 Method Περιγραφή context.rotate(theta); Περιστροφή του context ως προς το κέντρο.

6 Παράδειγμα Your browser is not HTML5 compatible. var c = document.getElementById("myCanvas"); var contx = c.getContext("2d"); contx.rotate(90 * Math.PI / 180); contx.fillRect(30, 10, 60, 70);

7 Scale method Your browser is not HTML5 compatible. var c = document.getElementById("myCanvas"); var contx = c.getContext("2d"); contx.strokeRect(1, 1, 10, 10); contx.scale(6, 5); contx.strokeRect(1, 1, 10, 10);

8 Transform method a Κλιμάκωση του σχεδίου οριζοντίως (scale horizontal) b Στρέβλωση του σχεδίου οριζόντια (skew horizontal) c Στρέβλωση του σχεδίου κάθετα (skew vertical) d Κλιμάκωση του σχεδίου κάθετα (scale vertical) dx Μετακίνηση του σχεδίου οριζοντίως (translate horizontal) dy Μετακίνηση του σχεδίου κάθετα (translate vertical) Method Περιγραφή context.transform(a,b,c,d,dx,dy) Μετακίνηση, κλιμάκωση και στρέβλωση του context του canvas. Γενική μορφή μετασχηματισμού

9 Γνώση υπόβαθρου για το animation Προκειμένου να συνεχίσετε την ανάγνωση που αφορά το animation θα πρέπει πρώτα να μελετήσετε τα θέματα που αφορούν την δημιουργία κλάσεων και αντικειμένων στο javascript Σας συνιστώ να ξεκινήσετε από http://www.w3schools.com/js/js_object_definition.asp Ιδιαίτερα να μελετήσετε την έννοια του constρuctor και του τρόπου υλοποίησης.

10 Ο κύκλος του Animation 1. Εκκίνηση2. Ενημέρωση του καμβά 3. Καθαρισμός του καμβά 4. Σχεδιασμός του καμβά Ο κύκλος του animation

11 Animation class var Animation = function(canvasId){ this.canvas = document.getElementById(canvasId); this.context = this.canvas.getContext("2d"); this.t = 0; this.timeInterval = 0; this.startTime = 0; this.lastTime = 0; this.frame = 0; this.animating = false; // provided by Paul Irish window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); };

12 Animation.prototype.getContext = function(){ return this.context; }; Animation.prototype.getCanvas = function(){ return this.canvas;}; Animation.prototype.clear = function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);}; Animation.prototype.setStage = function(func){ this.stage = func;}; Animation.prototype.isAnimating = function(){ return this.animating;}; Animation.prototype.getFrame = function(){ return this.frame;}; Animation.prototype.start = function(){ this.animating = true; var date = new Date(); this.startTime = date.getTime(); this.lastTime = this.startTime; if (this.stage !== undefined) { this.stage(); } this.animationLoop(); };

13 Animation.prototype.stop = function(){ this.animating = false; }; Animation.prototype.getTimeInterval = function(){ return this.timeInterval; }; Animation.prototype.getTime = function(){ return this.t; }; Animation.prototype.getFps = function(){ return this.timeInterval > 0 ? 1000 / this.timeInterval : 0; }; Animation.prototype.animationLoop = function(){ var that = this; this.frame++; var date = new Date(); var thisTime = date.getTime(); this.timeInterval = thisTime - this.lastTime; this.t += this.timeInterval; this.lastTime = thisTime; if (this.stage !== undefined) { this.stage(); } if (this.animating) { requestAnimFrame(function(){ that.animationLoop(); }); }};

14 Ένα παράδειγμα http://www.html5canvastutorials.com/cookbook/ch5/1369_05_02/ window.onload = function(){ var anim = new Animation("myCanvas"); var canvas = anim.getCanvas(); var context = anim.getContext(); var linearSpeed = 100; // pixels / second var box = { x: 0, y: canvas.height / 2 - 25, width: 100, height: 50 };

15 anim.setStage(function(){ // update var linearDistEachFrame = linearSpeed * this.getTimeInterval() / 1000; if (box.x < canvas.width - box.width) { box.x += linearDistEachFrame; } else { this.stop(); } // clear this.clear(); // draw context.beginPath(); context.fillStyle = "blue"; context.fillRect(box.x, box.y, box.width, box.height); }); anim.start(); };

16 Δεύτερο παράδειγμα http://www.html5canvastutorials.com/cookbook/ch5/1369_05_03/ window.onload = function(){ var anim = new Animation("myCanvas"); var canvas = anim.getCanvas(); var context = anim.getContext(); var gravity = 2; // pixels / second^2 var box = { x: canvas.width / 2 - 50, y: 0, vx: 0, vy: 0, width: 100, height: 50 };

17 anim.setStage(function(){ // update if (this.getTime() > 1000) { var speedIncrementEachFrame = gravity * anim.getTimeInterval() / 1000; // pixels / second box.vy += speedIncrementEachFrame; box.y += box.vy * this.getTimeInterval(); if (box.y > canvas.height - box.height) { box.y = canvas.height - box.height; this.stop(); } // clear this.clear(); // draw context.beginPath(); context.fillStyle = "blue"; context.fillRect(box.x, box.y, box.width, box.height); }); anim.start(); };