newbamboo · July 12, 2009 07:11
diff --git a/gistfile1.txt b/gistfile1.txt
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 	<title>index</title>
 	<script type ="text/javascript">
 	
 	function drawOnCanvas () {
 	 var canvas = document.getElementById('mycanvas');
 	 if (canvas.getContext){
 	   var context = canvas.getContext("2d");
 	 }	 
 	 
   // alert(context);

   delaydAlert(context, 0, 1000);
 	}

  function delaydAlert(context, counter, time) {
    
   var list = [
    [180,193,830,226],
    [490,33,483,670],[483,670,606,840],
    [746,343,496,766],[496,766,273,800],[273,800,176,680],[176,680,286,496],[286,496,606,463],[606,463,800,573],
    [800,573,826,746],[826,746,760,833]
   ];

   setInterval(function(){
     if (list[counter])
      drawLine(list[counter], context);
      counter = counter + 1;
   }, time);
  }
  
  function condition (argument) {
    var diffx     = arguments[0];
    var diffy     = arguments[1];
    var diffendx  = arguments[2];
    var diffendy  = arguments[3];
    var ex        = arguments[4];
    var ey        = arguments[5];
    // facing right
    if (diffx > 0){
      if(diffendx > ex){
        return true;         
      }
    }
  }
 	
 	function drawLine (arguments, context) {
 	  context.beginPath();
    context.lineJoin = "round";
    context.lineCap = "round";
    context.lineWidth = 30;
    scale = 3
    var sx = arguments[0] / scale;
    var sy = arguments[1] / scale;
    var ex = arguments[2] / scale;
    var ey = arguments[3] / scale;
    var ratio = 40;
    var diffx = ex - sx;
    var diffy = ey - sy;

    var diffstartx = sx;
    var diffstarty = sy;
    
    var diffendx = diffstartx + (diffx / ratio);
    var diffendy = diffstarty + (diffy / ratio);
    setInterval(function(){
      if(diffx > 0 && diffendx < ex || diffx < 0 && diffendx > ex){        
        
        context.moveTo(diffstartx, diffstarty);
        context.lineTo(diffendx, diffendy);
        // context.arc(diffendx,diffendy, 2, 0, 360, true);
        context.stroke();    
        // context.fill();    

        diffendx = diffstartx;
        diffendy = diffstarty;
      
        diffstartx = diffstartx + (diffx / ratio);
        diffstarty = diffstarty + (diffy / ratio);
        console.write("diffstartx:" + diffstartx + ", diffendx:" + diffendx + ",sx:" + sx + ",ex:" + ex);
        
      }
      // return context;
      
      
    }, 10);
 	}
 	</script>
 	
 	
 	
 </head>

 <body onload="drawOnCanvas();">
 <canvas id = "mycanvas" width = "1000" height = "1000">
 hello  
 </canvas>
 world
 </body>
 </html>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<title>index</title>
	<script type ="text/javascript">

	function drawOnCanvas () {
	var canvas = document.getElementById('mycanvas');
	if (canvas.getContext){
	var context = canvas.getContext("2d");
	}

	// alert(context);

	delaydAlert(context, 0, 1000);
	}

	function delaydAlert(context, counter, time) {

	var list = [
	[180,193,830,226],
	[490,33,483,670],[483,670,606,840],
	[746,343,496,766],[496,766,273,800],[273,800,176,680],[176,680,286,496],[286,496,606,463],[606,463,800,573],
	[800,573,826,746],[826,746,760,833]
	];

	setInterval(function(){
	if (list[counter])
	drawLine(list[counter], context);
	counter = counter + 1;
	}, time);
	}

	function condition (argument) {
	var diffx = arguments[0];
	var diffy = arguments[1];
	var diffendx = arguments[2];
	var diffendy = arguments[3];
	var ex = arguments[4];
	var ey = arguments[5];
	// facing right
	if (diffx > 0){
	if(diffendx > ex){
	return true;
	}
	}
	}

	function drawLine (arguments, context) {
	context.beginPath();
	context.lineJoin = "round";
	context.lineCap = "round";
	context.lineWidth = 30;
	scale = 3
	var sx = arguments[0] / scale;
	var sy = arguments[1] / scale;
	var ex = arguments[2] / scale;
	var ey = arguments[3] / scale;
	var ratio = 40;
	var diffx = ex - sx;
	var diffy = ey - sy;

	var diffstartx = sx;
	var diffstarty = sy;

	var diffendx = diffstartx + (diffx / ratio);
	var diffendy = diffstarty + (diffy / ratio);
	setInterval(function(){
	if(diffx > 0 && diffendx < ex \|\| diffx < 0 && diffendx > ex){

	context.moveTo(diffstartx, diffstarty);
	context.lineTo(diffendx, diffendy);
	// context.arc(diffendx,diffendy, 2, 0, 360, true);
	context.stroke();
	// context.fill();

	diffendx = diffstartx;
	diffendy = diffstarty;

	diffstartx = diffstartx + (diffx / ratio);
	diffstarty = diffstarty + (diffy / ratio);
	console.write("diffstartx:" + diffstartx + ", diffendx:" + diffendx + ",sx:" + sx + ",ex:" + ex);

	}
	// return context;


	}, 10);
	}
	</script>



	</head>

	<body onload="drawOnCanvas();">
	<canvas id = "mycanvas" width = "1000" height = "1000">
	hello
	</canvas>
	world
	</body>
	</html>