Playing with basics of HTML5 Canvas
Here’s a snippet of something I did tonight to play a bit with the Canvas and 2d Graphics context objects in javascript.
<html>
<head>
<title>Playing with Canvas</title>
</head>
<body style="padding:0 0; margin: 0 0; background:black">
<canvas id="myCanvas" width="1024" height="1024" ></canvas>
<script type="text/javascript">
//convert to CSS friendly Hex String
function d2h (n) {
var result = n.toString(16);
if (n < 16) {
result = '0'+result;
}
return result;
}
var preparingBackground = true;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var canvasWidth = parseInt(canvas.getAttribute("width"));
var canvasHeight = parseInt(canvas.getAttribute("height"));
var r=255; var red;
var g=255; var green;
var b=255; var blue;
var rectHeight = canvasHeight/256;
var rectWidth = canvasWidth/256;
var rectX = 0;
var rectY = 0;
var Rect = function(xval,yval,speedXval,speedYval,r,g,b) {
this.x = xval;
this.y = yval;
this.speedX = speedXval;
this.speedY = speedYval;
this.r = r;
this.g = g;
this.b = b;
//so colors dont jump from 255 to 0.
this.rDelta = 1;
this.gDelta = 1;
this.bDelta = 1;
this.width = 1;
this.height = 1;
//so rectangle colors wont change so fast.
this.colorChangeDefaultValue=1;
this.colorChangeAcumulator=1;
this.move = function () {
this.x = this.x+this.speedX;
this.y = this.y+this.speedY;
//if you reach a borders change direction.
if ((this.x+this.width >= canvasWidth && this.speedX > 0) ||
(this.x <= 0 && this.speedX < 0)) {
this.speedX = this.speedX*-1;
}
if ((this.y+this.height >= canvasHeight && this.speedY > 0) ||
(this.y <= 0 && this.speedY < 0)) {
this.speedY = this.speedY*-1;
}
}
//draw and change colors
this.draw = function () {
//play with color gradients when you have a chance...
if (this.colorChangeAcumulator--==0) {
if ((this.r >= 255 && this.rDelta > 0) ||
(this.r <= 0 && this.rDelta < 0)) {
this.rDelta=this.rDelta*-1;
}
if ((this.g >= 255 && this.gDelta > 0) ||
(this.g <= 0 && this.gDelta < 0)) {
this.gDelta=this.gDelta*-1;
}
if ((this.b >= 255 && this.bDelta > 0) ||
(this.b <= 0 && this.bDelta < 0)) {
this.bDelta=this.bDelta*-1;
}
this.r=(this.r+this.rDelta) % 256;
this.g=(this.g+this.gDelta) % 256;
this.b=(this.b+this.bDelta) % 256;
this.colorChangeAcumulator=this.colorChangeDefaultValue;
this.width++;
this.height++;
}
//paint the reactangle
ctx.fillStyle="#"+d2h(this.r)+d2h(this.g)+d2h(this.b);
ctx.fillRect(this.x,this.y,this.width,this.height);
}
}
//animation interval ids
var prepareBackgroundIntervalId = 0;
var rectsIntervalId = 0;
var speedX = 7;
var speedY = 7;
var theRects = [new Rect(0,0,speedX,speedY,10,44,100),
new Rect(canvasWidth,canvasHeight,-speedX,-speedY,125,0,0),
new Rect(canvasWidth,0,-speedX,speedY,0,210,80),
new Rect(0,canvasHeight,speedX,-speedY,40,40,0),
new Rect(canvasWidth/2,0,0,speedY,-4,40,40),
new Rect(canvasWidth/2,canvasHeight,4,-speedY,0,100,250),
new Rect(0,canvasHeight/2,speedX,0,210,100,100),
new Rect(canvasWidth,512,-speedX,0,100,10,0)];
function prepareBackground() {
if (preparingBackground) {
r=r-1;
g=g-1;
b=b-1;
red = d2h(r);
green = d2h(g);
blue = d2h(b);
ctx.fillStyle = "#"+red+green+blue;
ctx.fillRect(rectX,rectY,canvas.getAttribute("width"),rectHeight);
rectY = rectY + rectHeight;
preparingBackground = !(r==0 && g==0 && b==0);
} else {
clearInterval(prepareBackgroundIntervalId);
rectsIntervalId = setInterval("moveRects()",33);
}
}
function moveRects() {
for (i in theRects) {
var rect = theRects[i];
rect.draw();
rect.move();
}
}
prepareBackgroundIntervalId = setInterval("prepareBackground()",1);
</script>
</body>
</html>
