Skip to content

Instantly share code, notes, and snippets.

@TCotton
Created July 16, 2011 11:49
Show Gist options
  • Save TCotton/1086290 to your computer and use it in GitHub Desktop.
Save TCotton/1086290 to your computer and use it in GitHub Desktop.
CAKE HTML5 canvas experiment
function html5_canvas() {
// declare variables
var $canvas, $circle, $rectangle, $backG, $canvasImage, $imageMask;
/*
Create the HTML elements below
It is the child of the code tag and will be 750 x 600
*/
$canvas = new Canvas(document.getElementById("code"), 750, 600);
/*
Give the canvas a background of white
*/
$canvas.fill = "#fff";
/*
Create the gradient seetings
Add an x and y axis value
The colorStops are the rgb colour values
We will use the gradient in the circle below
*/
$backG = new Gradient({
endX: 300,
endY: 300,
colorStops: [
[0, [255, 255, 255]],
[1, [0, 0, 0]]
]
});
/*
Create a cirlce
150px wide
Set x and y axis values
the fill is the previously made gradient
stroke and stroke width set
endAngle: Math.PI * 2 gives a perfect circle
*/
$circle = new Circle(150, {
x: 200,
y: 200,
fill: $backG,
stroke: 'rgb(255,241,12)',
strokeWidth: 20,
endAngle: Math.PI * 2
});
/*
Here we use the addFrameListener function to add animation
t = total time in milliseconds that the application has been running
dt = milliseconds since the last frame
in the addFrameListener fucnction it is possible to use various transformation matrixes
such as skewX, skeyY, scale, rotation
Afterwards apend the cirlce object to the canvas
*/
$circle.addFrameListener(
function (t, dt) {
this.scale = Math.sin(t / 1000);
});
$canvas.append($circle);
$rectangle = new Rectangle(150, 150, {
x: 300,
y: 350,
fill: 'rgb(255,241,12)',
stroke: 'rgb(0,147,211)',
strokeWidth: 20,
});
$rectangle.addFrameListener(
function (t, dt) {
this.rotation = Math.sin(t / 2000) * Math.PI * 2;
this.skewX = Math.sin(t / 2000) * Math.PI * 2;
});
$canvas.append($rectangle);
// load the image as below
$canvasImage = Object.loadImage("smiley.png");
/*
Now create the image mask, animate it and append it to the canvas
*/
$imageMask = new ImageNode($canvasImage);
$imageMask.x = 450;
$imageMask.y = 350;
$imageMask.addFrameListener(
function (t, dt) {
this.scale = Math.tan(t / 1000);
});
$canvas.append($imageMask);
} // end function html5_canvas
function init() {
html5_canvas();
}
// call init function
window.addEventListener("load", init, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment