Я хочу переместить объект по наклонной линии. Я дал свой код. В моем коде в моем третьем элементе div, когда я перемещаю ползунок, я рисую наклонную линию на этой линии и хочу переместить объект. Аналогичная вещь, которую я делаю в своем первом Div. Куда я двигаю объект по кривой. Я ищу какую-то функцию, в которой я буду указывать точки, а объект будет следовать точкам. Вот мой код Этот код работает только в Chrome, так как я пытаюсь сделать это только для браузеров Safari и Chrome.

        
            
            

   
        .wrapper {
            margin: 0 auto;
            width: 1000px;
        }
        .canHdr {
           float: left;
           width: 450px;
               height: 400px;
               border: 1px solid red;
    }
  

    
    
    
    
    

        
        

            <p>
                This is my 1st div with bezier curve the curve is getting drawn as slider moves and also a ball in moving on that . 
            </p>

            
                
                    [No canvas support]
                

            

            
                
            

        
        
        
        

            <p>
                This is my 2nd div
            </p>

            
                
                    [No canvas support]
                

            

            
                
            

        
        
        
        
            <p>
                This is my 3rd div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
            </p>

            
                
                    [No canvas support]
                

            

            
                
            

        
        
        
        

            <p>
                This is my 4th div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
            </p>

            
                
                    [No canvas support]
                

            

            
                
            

        
        

    
    

    
        function counterSlider(sID) {

            var slideVal = document.getElementById(sID).value;
            /*if (maxValue ==100){

             slideVal=slideVal/100;
             }*/
            slideVal = slideVal / 100;
            var position = slideVal;

            var startPt = {
                x : 18.8,
                y : 45
            };
            var controlPt = {
                x : 28,
                y : 160
            };
            var endPt = {
                x : 228,
                y : 165
            };
            var startPt2 = {
                x : 20,
                y : 75
            };
            var controlPt2 = {
                x : 28,
                y : 160
            };
            var endPt2 = {
                x : 228,
                y : 165
            };

            if (slideVal == 0) {

                erase('myCanvas2');
                erase('myCanvas3');
                erase('myCanvas4');
                //newSprite('myCanvas1b', 18.8, 45);

                drawBezier2('myCanvas1', new Array({
                    x : 18.8,
                    y : 45
                }, {
                    x : 28,
                    y : 160
                }, {
                    x : 228,
                    y : 165
                }), slideVal);
                drawBezier2('myCanvas2', new Array({
                    x : 20,
                    y : 75
                }, {
                    x : 28,
                    y : 160
                }, {
                    x : 228,
                    y : 165
                }), slideVal);

            } else if (slideVal > 0 && slideVal  34 && slideVal  67 && slideVal