Morrie anim

lines build up (slowly)

by rob Davis

HTML

<body>
    <div>
        <canvas id="canvasId" width="500" height="500"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:white;  width:500px; height:500px }

JavaScript

var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }
		
	var startx = 0;
	var starty = 0;
	var endx = 0;
	var endy = 250;
	var context;
	var gradient;
	doDraw();
function doDraw() 
{
	context = document.getElementById('canvasId').getContext("2d");
	gradient = context.createLinearGradient(startx,starty,endx,endy);
	gradient.addColorStop(0, "#ff0000");
	gradient.addColorStop(1, "#000000");
	line(angle,context,gradient);
	setInterval(drawLine, 250);
}

function drawLine() 
{
	incrementAngle();
	line(angle,context,gradient);

}

function line(a,contextB, grad) {
	contextB.save();                
	contextB.beginPath();
	contextB.strokeStyle=grad;
	contextB.translate(250,250);
	contextB.rotate(convertToRadians(a));
	contextB.moveTo(startx,starty);
	contextB.lineWidth = 1;
	contextB.lineJoin = "round";	
	contextB.lineTo(endx,endy);
	contextB.stroke();
	contextB.closePath();
	contextB.restore();
}