Source Code


var canvas;
var ctx;
var img;
var img_dim;
var img_rot;

function init() {
canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
ctx = canvas.getContext("2d");
img = new Image();

img_dim = new Vector(400, 600);
img_rot = new Vector(0, 0);
ctx.drawImage(img, 0, 0, img_dim.x, img_dim.y);
}

function getInput(event) {
if (event.keyCode == 87)
{
scaleUp();
}
else if (event.keyCode == 83)
{
scaleDown();
}
else if (event.keyCode == 65)
{
rotateLeft();
}
else if (event.keyCode == 68)
{
rotateRight();
}
}

function scaleUp()
{
ctx.clearRect(-100, -100, canvas.width + 100, canvas.height + 100);
img_dim = img_dim.multiplyByMatrix(new Matrix(1.1, 0, 0, 1.1));
ctx.drawImage(img, 0, 0, img_dim.x, img_dim.y);
}

function scaleDown()
{
ctx.clearRect(-100, -100, canvas.width + 100, canvas.height + 100);
img_dim = img_dim.multiplyByMatrix(new Matrix(0.9, 0, 0, 0.9));
ctx.drawImage(img, 0, 0, img_dim.x, img_dim.y);
}

function rotateLeft()
{
ctx.clearRect(-100, -100, canvas.width + 100, canvas.height + 100);
img_rot = img_rot.addVector(new Vector(0.01, -0.01));
ctx.setTransform(1, img_rot.x, img_rot.y, 1, 0, 0);
ctx.drawImage(img, 0, 0, img_dim.x, img_dim.y);
}

function rotateRight()
{
ctx.clearRect(-100, -100, canvas.width + 100, canvas.height + 100);
img_rot = img_rot.addVector(new Vector(-0.01, 0.01));
ctx.setTransform(1, img_rot.x, img_rot.y, 1, 0, 0);
ctx.drawImage(img, 0, 0, img_dim.x, img_dim.y);

}

Files

vector presentation.zip 1 kB
13 days ago