libbkmz · January 21, 2013 18:09
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="UTF-8" />
        <title>lab2!</title>
    </head>
    <body>
    <canvas id="canvas" style=" border: 1px solid black; " onclick="javascript:movement();"></canvas>
    <img src="1.jpg" id="krest" style="display: none;">

    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var WIDTH = 1024;
        var HEIGHT = 600;
        var last_x=0, last_y=0;
        canvas.width=WIDTH;
        canvas.height=HEIGHT;
        var krest = document.getElementById("krest");

        function point(xr,yr){
            this.x=xr;
            this.y=yr;
        }

        function dda(point1,point2){
            dx=point2.x - point1.x;
            dy=point2.y - point1.y;

            if (Math.abs(dx)>=Math.abs(dy)) {
                cambio = Math.abs(dx);
            }
            else{
                cambio = Math.abs(dy);
            }
            incrementoenx=dx/cambio;
            incrementoeny=dy/cambio;
            array=[];
            m=dy/dx
            x=point1.x;
            y=point1.y;
            for(i=0;i<=cambio;i++){
                    array.push(new point(Math.round(x),Math.round(y)));
                    x+=incrementoenx;
                    y+=incrementoeny;
                }
            return array;
        }

        function movement(){
            var x = event.pageX - canvas.offsetLeft;
            var y = event.pageY - canvas.offsetTop;

            step  = 15;
            sleep = 10;

            length = Math.sqrt(Math.pow(x-last_x, 2)+Math.pow(y-last_y, 2));
            offset = length/step;

            offset_x = Math.sqrt(Math.pow(x,2)+Math.pow(last_x, 2))/step;
            offset_y = Math.sqrt(Math.pow(y,2)+Math.pow(last_y, 2))/step;

            var index=0;
            var points = dda(new point(last_x, last_y), new point(x, y)); 

            var drawing = function(index) { 

                    for (i=0;i<step;i++){

                        ctx.drawImage(krest, points[index].x, points[index].y, 40, 40);

                        if (index++ > points.length)
                        {
                            return;
                        }
                    }
                    setTimeout(function() {
                        drawing(index);
                    }, sleep);
            }

            drawing(index);
            


            last_x = x;
            last_y = y;
        }

    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>lab2!</title>
	</head>
	<body>
	<canvas id="canvas" style=" border: 1px solid black; " onclick="javascript:movement();"></canvas>
	<img src="1.jpg" id="krest" style="display: none;">

	<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var WIDTH = 1024;
	var HEIGHT = 600;
	var last_x=0, last_y=0;
	canvas.width=WIDTH;
	canvas.height=HEIGHT;
	var krest = document.getElementById("krest");

	function point(xr,yr){
	this.x=xr;
	this.y=yr;
	}

	function dda(point1,point2){
	dx=point2.x - point1.x;
	dy=point2.y - point1.y;

	if (Math.abs(dx)>=Math.abs(dy)) {
	cambio = Math.abs(dx);
	}
	else{
	cambio = Math.abs(dy);
	}
	incrementoenx=dx/cambio;
	incrementoeny=dy/cambio;
	array=[];
	m=dy/dx
	x=point1.x;
	y=point1.y;
	for(i=0;i<=cambio;i++){
	array.push(new point(Math.round(x),Math.round(y)));
	x+=incrementoenx;
	y+=incrementoeny;
	}
	return array;
	}

	function movement(){
	var x = event.pageX - canvas.offsetLeft;
	var y = event.pageY - canvas.offsetTop;

	step = 15;
	sleep = 10;

	length = Math.sqrt(Math.pow(x-last_x, 2)+Math.pow(y-last_y, 2));
	offset = length/step;

	offset_x = Math.sqrt(Math.pow(x,2)+Math.pow(last_x, 2))/step;
	offset_y = Math.sqrt(Math.pow(y,2)+Math.pow(last_y, 2))/step;

	var index=0;
	var points = dda(new point(last_x, last_y), new point(x, y));

	var drawing = function(index) {

	for (i=0;i<step;i++){

	ctx.drawImage(krest, points[index].x, points[index].y, 40, 40);

	if (index++ > points.length)
	{
	return;
	}
	}
	setTimeout(function() {
	drawing(index);
	}, sleep);
	}

	drawing(index);



	last_x = x;
	last_y = y;
	}

	</script>
	</body>
	</html>
No results found