Here are some of the web projects I have created.







This small project is a simple animation that uses HTML5. It’s a snowman! Woohoo!

It’s probably best if you just experience it yourself. Here.

Code Snippet:

[cc lang=”html4strict”]
canvasNow = document.getElementById(“draw”);
ctx = canvasNow.getContext(‘2d’);
ctx.fillStyle = “#7BCEDB”;
function reset(){
//back color loop
for(var x = 0; x < 15; x++){ var space = x * 20; ctx.fillRect(0,space,300,20); ctx.fill(); if(x % 2 == 0){ ctx.fillStyle = "#5298A3"; } else { ctx.fillStyle = "#7BCEDB"; } } //paramters: x,y, width, height ctx.strokeStyle = "black"; ctx.strokeRect(0,0,300,300); //grid loop for(var x = 0; x < 15; x++){ var space = x * 20; ctx.beginPath(); ctx.moveTo(space, 0); ctx.lineTo(space, 300); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, space); ctx.lineTo(300, space); ctx.closePath(); ctx.stroke(); } //big circles ctx.scale(1, 1); ctx.beginPath(); ctx.arc(150,120,100,0, Math.PI*2, false); ctx.closePath(); ctx.fillStyle = "#61B3ED"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = '#003300'; ctx.stroke(); ctx.beginPath(); ctx.arc(150,120,88,0, Math.PI*2, false); ctx.closePath(); // create radial gradient var gradient = ctx.createRadialGradient(238, 50, 20, 238, 100, 300); gradient.addColorStop(0, '#8ED6FF'); gradient.addColorStop(1, '#004CB3'); ctx.fillStyle = gradient; [/cc] [/tab] [/tabs]

This is an ad!