You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
5 years ago
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>canvas.js | transformations</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<script type="text/javascript" src="../../pattern/canvas.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script type="text/canvas">
|
||
|
|
function setup(canvas) {
|
||
|
|
canvas.size(500, 500);
|
||
|
|
}
|
||
|
|
function draw(canvas) {
|
||
|
|
canvas.clear();
|
||
|
|
// The simplest shapes to draw are rectangle, ellipse and line.
|
||
|
|
// line() takes four parameters: x0, y0, x1, y1, the start and end coordinates.
|
||
|
|
// rect() and ellipse() also take four parameters: x, y, width and height.
|
||
|
|
// The default origin point (0,0) is the top-left corner of the canvas.
|
||
|
|
// Draw a line from x=0 (horizontal) and y=0 (vertical) to x=100 and y=200.
|
||
|
|
// stroke() sets the current outline color using R,G,B,A values between 0.0-1.0.
|
||
|
|
stroke(0, 0, 0, 1);
|
||
|
|
strokewidth(0.5);
|
||
|
|
// From now on all shapes are drawn with a black stroke.
|
||
|
|
line(0, 0, 100, 200);
|
||
|
|
// Ellipses are positioned from their center:
|
||
|
|
fill(1, 0, 0, 0.5); // red
|
||
|
|
ellipse(0, 0, 100, 100);
|
||
|
|
// Transformations translate(), rotate(), scale() use the current origin point.
|
||
|
|
// This means that, by default, everything rotates around (0,0).
|
||
|
|
// So a rectangle at (50,50) will rotate around the top-left corner of the canvas.
|
||
|
|
// Rectangles are positioned from their top-left corner:
|
||
|
|
push();
|
||
|
|
rotate(canvas.frame); // canvas.frame increases by +1 each animation frame.
|
||
|
|
fill(0, 1, 0, 0.5); // green
|
||
|
|
rect(50, 50, 100, 100);
|
||
|
|
pop();
|
||
|
|
// translate() can be used to relocate the transformation origin point.
|
||
|
|
// We place the origin point at (250,250).
|
||
|
|
// All shapes and transformation will now originate from x=250 and y=250.
|
||
|
|
// So a rectangle drawn at x=0 and y=0
|
||
|
|
// will rotate with its top-left corner around this point.
|
||
|
|
// We nudge it left and up so that rotates from its center:
|
||
|
|
push();
|
||
|
|
translate(250, 250);
|
||
|
|
rotate(canvas.frame);
|
||
|
|
fill(0, 0, 1, 0.5); // blue
|
||
|
|
rect(-100, -100, 200, 200);
|
||
|
|
pop();
|
||
|
|
// Transformations between push() and pop() last until pop() is called.
|
||
|
|
// The small purple rectangle follows the mouse:
|
||
|
|
push();
|
||
|
|
translate(canvas.mouse.x, canvas.mouse.y);
|
||
|
|
rotate(canvas.frame*2);
|
||
|
|
scale(1.0 + canvas.mouse.relative_x); // scale(1.0) = 100%
|
||
|
|
fill(1, 0, 1, 0.5); // purple = blue + red
|
||
|
|
rect(0, 0, 20, 20);
|
||
|
|
pop();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|