fixed the width and height stuff
This commit is contained in:
parent
b08247dfe9
commit
ee8f94f68e
2 changed files with 25 additions and 25 deletions
|
@ -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
48
main.js
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
|
Loading…
Reference in a new issue