WEB DEVELOPMENT
Enviado por jajajaja3 • 17 de Mayo de 2015 • Tesis • 2.752 Palabras (12 Páginas) • 151 Visitas
Header indie font bundle logo
Grab the Indie Font Bundle today and save over 97%! Check it out
tuts+
Free Tutorials
Courses
eBooks
Blog
Pricing
Sign In
Free Account
Code
Categories
Learning Guides Expert HelpNew!
WEB DEVELOPMENT
Canvas From Scratch: Transformations and Gradients
by Rob Hawkes20 Apr 201124 Comments
Share
1
Share
Share
This post is part of a series called Canvas From Scratch.
Canvas From Scratch: Advanced Drawing
Canvas from Scratch: Pixel Manipulation
In this article, I'm going to walk you through transformations in the canvas, as well as shadows and gradients. Transformations are an extremely valuable set of methods that allow you to start being creative with the way you draw objects on the canvas. Let's get started after the jump!
Setting Up
You're going to use the same HTML template from the previous articles, so open up your favourite editor and paste in the following code:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
Here we have nothing more than a basic HTML page with a canvas element and some JavaScript that runs after the DOM has loaded. Nothing crazy.
Translations in Action
Translate essentially shifts the entire coordinate system.
One of the simplest transformations in canvas is translate. This allows you to move the origin point of the 2d rendering context; the (0, 0) position on the canvas. Let me show you what this means.
First, place a square in canvas at the position (0, 0):
1
ctx.fillRect(0, 0, 100, 100);
It will draw itself at the top left hand edge of the canvas. Still - nothing out of the ordinary here.
A simple square
Now, try translating the 2d rendering context and drawing another square in the same position:
1
2
3
4
5
ctx.save();
ctx.translate(100, 100);
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
What do you think will happen? Have a gold star if you guessed that the new square will be drawn at the position (100, 100). No play time for those who guessed wrong. Sorry!
Translating a square
So what happened here then? As far as the code for drawing the second square is concerned, you drew it in the same place as the first square. The reason for this is that you basically shifted the entire coordinate system of the canvas so that its (0, 0) position is now at the place (100, 100).
How translation works
Does it make a little more sense now? I hope so. It can take a little while to get your head around, but it's a simple concept once you understand it.
You probably wouldn't use this transformation too much on its own, as you could simply draw the second square at (100, 100) to get the same effect. The beauty of translate, though, is that you can combine it with other transformations to do some pretty cool things.
Let's take a look at the next transformation on the list.
Scaling Your Visuals
As you've probably guessed, the scale transformation is used for resizing. More specifically, the scale transformation is used to scale the 2d rendering context.
Remove the code that you worked on with the translate example, and add the following code:
1
ctx.fillRect(100, 100, 100, 100);
This will draw a standard square at the position (100, 100), with a width and height of 100 pixels. So how do we scale this?
A simple square
Properties in scale are multipliers for the x and y dimensions.
The scale transformation is used in a similar way to translate, in that it's called before you draw the objects that you want it to be applied to. It's important to point out that the properties in scale are multipliers for the x and y dimensions. This means that a scale of (1, 1) would multiply the size of the 2d rendering context by one, leaving it the same size it was before. A scale of (5, 5) would multiply the size of the 2d rendering context by five, making it five times larger than it was previously. Simple.
In your case you want to double the size of the square, so you apply a scale of (2, 2):
1
2
3
4
ctx.save();
ctx.scale(2, 2);
ctx.fillRect(100, 100, 100, 100);
ctx.restore();
Which results in a square that is two times the size:
Scaling a square
However, notice how the square is now being drawn in a different position than it was being drawn before you applied scale. The reason for this is that scale multiplies the size of everything in the 2d rendering context, including coordinates. In your case, the position (100, 100) now becomes (200, 200); the coordinates are twice the size that they would be without being scaled.
To get around this, we can perform a translate that moves the origin of the 2d rendering context to the position that you want to draw the square. If you then apply scale and draw the square at position (0, 0), its position won't be shifted:
1
2
3
4
5
ctx.save();
ctx.translate(100, 100);
ctx.scale(2, 2);
...