58前端社招一二面面经

function on(parent, className, eventName, cb) {

  parent.addEventListener(eventName, function (evt) {
    var target = evt.target;
    var currentTarget;
    while (target) {
      if (target.tagName === 'BODY') break; // 找到body还没找到(说明点击的位置已经是目标元素的父级了)
      if (target.getAttribute('class') === className) {
        currentTarget = target;
        break;
      } else {
        target = target.parentNode;
      }
    }

    if (currentTarget) {
      cb.apply(currentTarget);
    }
  });

}
	

		
	

sceneL = new THREE.Scene();
sceneL.background = new THREE.Color(0xfffeee);
sceneR = new THREE.Scene();
sceneR.background = new THREE.Color(0x000fff);

renderer.setScissorTest( true );

renderer.setScissor( 0, 0, window.innerWidth / 2 , window.innerHeight );
renderer.render( sceneL, camera );

renderer.setScissor( window.innerWidth / 2 , 0, window.innerWidth, window.innerHeight );
renderer.render( sceneR, camera );

var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        // 获取 2d 绘图环境
        var context = canvas.getContext('2d');

        // 配置颜色等画图参数
        context.stokeStyle = '#ff0000';
        context.lineWidth = 2;

        function getCoordinate_y (x) {
            return 0.01 * x * x;
        }

        var startP = {
            x: 0,
            y: 0
        };
        var endP = {
            x: 100,
            y: 100
        }
        function move (startP, endP, delay) {
            var increment_x = (endP.x - startP.x) / delay; // 每ms的增量
            var movePoint = {
                x: startP.x,
                y: startP.y
            };

            function render () {
                if (movePoint.x >= endP.x) {
                    return; 
                }
                
                // 初始位置
                var p1 = {
                    x: movePoint.x,
                    y: movePoint.y
                };

                // 移动距离
                movePoint.x +=  increment_x * 1000 / 60;
                movePoint.y = getCoordinate_y(movePoint.x);

                // 结束位置
                var p2 = {
                    x: movePoint.x,
                    y: movePoint.y
                };
                console.log(movePoint.y);

                drawLine(context, p1, p2);

                requestAnimationFrame(render);
            }

            function drawLine (ctx, startP, endP) {
                ctx.moveTo(startP.x, startP.y);
                ctx.lineTo(endP.x, endP.y);
                ctx.stroke();
            }
            
            render();
        }

        move(startP, endP, 3000);
    }