fixed the width and height stuff

This commit is contained in:
Michael Yang 2014-05-17 11:25:33 -04:00
parent b08247dfe9
commit ee8f94f68e
2 changed files with 25 additions and 25 deletions

View file

@ -5,7 +5,7 @@
</head>
<body>
<center>
<canvas id="canvas" style = 'width:1200px;height:700px;background-color:yellow;'></canvas>
<canvas id="canvas" style='border: 1px black solid;' width='1000' height='1000'></canvas>
</center>
<script src="entities.js"></script>

48
main.js
View file

@ -1,4 +1,3 @@
// main thing here
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
@ -11,11 +10,11 @@ window.requestAnimFrame = (function(){
};
})();
var blocks = [];
// var blocks = [];
for (var i = 0; i < 6; i++) {
blocks.push(new Block(i, 'green'));
}
// for (var i = 0; i < 6; i++) {
// blocks.push(new Block(i, 'green'));
// }
Render();
@ -28,6 +27,7 @@ function drawClock(x, y, sides, sideLength, theta) {
ctx.moveTo(coords.x, coords.y);
}
ctx.stroke();
}
function Render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -38,25 +38,25 @@ function Render() {
}
function Block(lane, color, time) {
this.lane = lane;
this.angle = 15 * (Math.PI / 180) + 30 * (Math.PI / 180) * lane;
this.color = color;
// function Block(lane, color, time) {
// this.lane = lane;
// this.angle = 15 * (Math.PI / 180) + 30 * (Math.PI / 180) * lane;
// this.color = color;
this.draw = function() {
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(this.angle);
ctx.fillStyle = '#000';
ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 30, 30);
ctx.restore();
ctx.fillRect(200, 200, 200, 200);
};
// this.draw = function() {
// ctx.translate(canvas.width / 2, canvas.height / 2);
// ctx.rotate(this.angle);
// ctx.fillStyle = '#000';
// ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 30, 30);
// ctx.restore();
// ctx.fillRect(200, 200, 200, 200);
// };
if (!time) {
this.time = time;
}
else {
time = 200;
}
}
// if (!time) {
// this.time = time;
// }
// else {
// time = 200;
// }
// }