1

我想在斜坡线上移动一个球。我已经为曲线路径完成了它。我正在尝试对线路做同样的事情。我已经给出了我的代码。在我的代码中，我正在绘制一条曲线并使用单个函数“counterSlider”在该曲线上移动一个球。在相同的功能上，我想在我画的线上移动球。

                <!DOCTYPE HTML>
                <html>
                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1">

                        <style type="text/css">
                        .wrapper{
                            margin:0 auto;
                            width:1000px;
                        }
                        .canHdr{
                                float:left;
                                width:450px;
                                height:400px;
                                border:1px solid red;

                            }
                        </style>

                    </head>
                    <body>
                        <form>
                            <!-- wrapper -->
                            <div class="wrapper">



                                    <!-- canHdr -->
                                    <div id="canHdr" class="canHdr" >

                                        <p>This is my 1st div</p>

                                            <div class="canOuterHdr" >
                                                <canvas id="myCanvas1" width="300" height="195" style="position: relative;">
                                                    [No canvas support]
                                                </canvas>

                                            </div>

                                            <div id="slider1" class="newBg">
                                                <input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide1');" />
                                            </div>


                                    </div>
                                    <!--/ canHdr -->
                                    <!-- canHdr2 -->
                                    <div id="canHdr2" class="canHdr" >

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

                                            <div class="canOuterHdr" >
                                                <canvas id="myCanvas2" width="300" height="195" style="position: relative;">
                                                    [No canvas support]
                                                </canvas>

                                            </div>

                                            <div id="slider2" class="newBg">
                                                <input id="slide2" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide2');" />
                                            </div>


                                    </div>
                                    <!-- canHdr2 -->
                                    <!-- canHdr3 -->
                                    <div id="canHdr3" class="canHdr" >
                                        <p>This is my 3rd div</p>


                                            <div class="canOuterHdr" >
                                                <canvas id="myCanvas3" width="300" height="195" style="position: relative;">
                                                    [No canvas support]
                                                </canvas>

                                            </div>

                                            <div id="slider3" class="newBg">
                                                <input id="slide3" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide3'); drawSlopeCurve2('slide3','100');" />
                                            </div>


                                    </div>
                                    <!--/ canHdr3 -->
                                    <!-- canHdr4 -->
                                    <div id="canHdr4" class="canHdr" >

                                        <p>This is my 4th div</p>

                                            <div class="canOuterHdr" >
                                                <canvas id="myCanvas4" width="300" height="195" style="position: relative;">
                                                    [No canvas support]
                                                </canvas>

                                            </div>

                                            <div id="slider4" class="newBg">
                                                <input id="slide4" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide4'); drawSlopeCurve1('slide4','100');" />
                                            </div>


                                    </div>
                                    <!--/ canHdr4 -->



                            </div>
                            <!-- /wrapper -->

                            <script type="text/javascript">

                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) {


                        erase('myCanvas1');
                        //erase('myCanvas1b');
                        erase('myCanvas2');
                        erase('myCanvas3');
                        erase('myCanvas4');


                        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);

                        drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
                        drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);



                    } else if (slideVal > 34 && slideVal <= 67) {


                        erase('myCanvas1');

                        erase('myCanvas2');
                        erase('myCanvas3');
                        erase('myCanvas4');


                        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);

                        drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
                        drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);



                    } else if (slideVal > 67 && slideVal <= 100) {


                        erase('myCanvas1');

                        erase('myCanvas2');
                        erase('myCanvas3');
                        erase('myCanvas4');

                        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);

                        drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
                        drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);



                    }
                }


                function erase(canvasId) {

                    var canvas = document.getElementById(canvasId);
                    var context = canvas.getContext("2d");
                    context.beginPath();
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    canvas.width = canvas.width;

                }



                function staticGraph4(grcanId) {
                    var canvas = document.getElementById(grcanId);
                    var context = canvas.getContext('2d');
                    context.beginPath();
                    context.moveTo(16, 170);
                    context.lineTo(160, 72);
                    context.lineWidth = 0.6;
                    context.stroke();

                }

                function staticGraph5(grcanId) {
                    var canvas = document.getElementById(grcanId);
                    var context = canvas.getContext('2d');

                    context.beginPath();
                    context.moveTo(16, 170);
                    context.lineTo(200, 80);
                    context.lineWidth = 0.6;
                    context.stroke();
                }

                /**********for backgroundImage********************/





                function _getQBezierValue(t, p1, p2, p3) {
                    var iT = 1 - t;
                    return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;

                }

                function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
                    return {
                        x : _getQBezierValue(position, startX, cpX, endX),
                        y : _getQBezierValue(position, startY, cpY, endY)
                    };
                }


                function drawNextPoint(canId, startPt, controlPt, endPt, position) {
                    var pt = getQuadraticCurvePoint(startPt.x, startPt.y, controlPt.x, controlPt.y, endPt.x, endPt.y, position);
                    position = (position + 0.006) % 1.0;
                    var canvas = document.getElementById(canId);
                    var ctx = canvas.getContext('2d');
                    //ctx.globalCompositeOperation = 'source-atop';
                    //ctx.globalCompositeOperation = "destination-over";
                    ctx.beginPath();
                    ctx.fillStyle = "#0077c1";
                    ctx.arc(pt.x, pt.y, 6, 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill();
                }

                function newSprite(canId, mvx, mvy) {
                    var canvas = document.getElementById(canId);
                    var ctx = canvas.getContext('2d');
                    ctx.globalCompositeOperation = 'source-atop';
                    //ctx.globalCompositeOperation = "destination-over";
                    ctx.beginPath();
                    ctx.fillStyle = "#0077c1";
                    ctx.arc(mvx, mvy, 6, 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill();
                }

                function drawBezier2(canId, points, slideVal) {

                    var canvas = document.getElementById(canId);

                    var context = canvas.getContext("2d");
                    //context.globalCompositeOperation = 'source-atop';
                    //context.strokeStyle = "rgb(113, 113, 213)";
                    context.strokeStyle = "#000";
                    context.lineWidth = 0.6;
                    context.beginPath();
                    // Label end points
                    //context.fillStyle = "rgb(0, 0, 0)";
                    // Draw spline segemnts
                    context.moveTo(points[0].x, points[0].y);
                    for (var t = 0; t <= slideVal; t += 0.1) {
                        context.lineTo(Math.pow(1 - t, 2) * points[0].x + 2 * (1 - t) * t * points[1].x + Math.pow(t, 2) * points[2].x, Math.pow(1 - t, 2) * points[0].y + 2 * (1 - t) * t * points[1].y + Math.pow(t, 2) * points[2].y);
                    }

                    // Stroke path
                    context.stroke();
                }


                function drawSlopeCurve1(sID, maxValue) {
                   // erase('canvasTwo');                        

                    var canId = 'myCanvas4';
                    var slideVal = parseInt(document.getElementById(sID).value);                        
                    var canvas = document.getElementById(canId);
                    var context = canvas.getContext('2d');

                    //line end points
                    x1 = 16; y1 = 170;
                    x2 = 200; y2 = 80;

                    //get slope (rise over run)
                    var m = (y2-y1)/(x2-x1);
                    //get y-intercept
                    var b = y1 - (m * x1);
                    //get distance between the two points
                    var distance = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
                    //get new x and y values
                    var x = x1 + parseInt(distance/maxValue * slideVal);
                    var y = parseInt(m * x + b);

                    context.beginPath();
                    context.moveTo(x1, y1);
                    context.lineTo(x, y);
                    context.lineWidth = 0.6;
                    context.stroke();
                }
                function drawSlopeCurve2(sID,maxValue) {
                   // erase('canvasTwo');                        

                    var canId = 'myCanvas3';
                    var slideVal = parseInt(document.getElementById(sID).value);                        
                    var canvas = document.getElementById(canId);
                    var context = canvas.getContext('2d');

                    //line end points
                    x1 = 16; y1 = 170;
                    x2 = 160; y2 = 72;

                    //get slope (rise over run)
                    var m = (y2-y1)/(x2-x1);
                    //get y-intercept
                    var b = y1 - (m * x1);
                    //get distance between the two points
                    var distance = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
                    //get new x and y values
                    var x = x1 + parseInt(distance/maxValue * slideVal);
                    var y = parseInt(m * x + b);

                    context.beginPath();
                    context.moveTo(x1, y1);
                    context.lineTo(x, y);
                    context.lineWidth = 0.6;
                    context.stroke();
                }

                            </script>
                        </form>
                    </body>
                </html>

我的函数 drawSlopeCurve1 用于在滑块移动时画一条线。在那条线上我想移动一个球。此代码适用于 chrome。提前致谢。

4

1 回答 1

3

以下是如何沿着连接两个端点的一系列线性点移动“球”。

小提琴：http: //jsfiddle.net/m1erickson/2j9zc/

在此处输入图像描述

// We'll be transforming our ball so save the context state
// That way we don't have to un-transform when we're done
context.save();
context.lineWidth=2;
context.beginPath();

// translate(move) to the middle of where you want to draw the ball
context.translate(point.x+ballRadius,point.y-11);

// rotate the ball
context.rotate(sliderValue*Math.PI/20);

// draw half the ball
context.arc(0,0,ballRadius,0,Math.PI*2,false);
context.closePath();
context.fillStyle="yellow";
context.fill();
context.stroke();

// draw the other half of the ball
context.beginPath();
context.arc(0,0,ballRadius,0,Math.PI,false);
context.closePath();
context.fillStyle="lightblue";
context.fill();
context.stroke();

// restore the context to its untransformed state
context.restore();

这是代码和小提琴：http: //jsfiddle.net/m1erickson/2j9zc/

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <style>
          .wrapper {
              width: 375px;
              height:350px;
              border:2px solid green;
              padding:15px;
          }
          canvas{
              margin-left:15px;
              border:1px solid red;
          }
          #sliderwrapper{
              display: inline-block;
              position:relative; 
              width:37px; height:300px; 
              border:1px solid blue;
          }
          #amount{ 
              position:absolute; 
              left:5px; top:5px; 
              margin-bottom:15px; 
              width:23px; 
              border:0; color:#f6931f; 
              font-weight:bold; 
          }
          #slider-vertical{ 
              position:absolute; 
              left:10px; top:40px; 
              width:15px; height:225px; 
              border:0px; color:#f6931f; 
              font-weight:bold; 
          }
      </style>
    </head>
    <body>
        <div class="wrapper">
            <div id="sliderwrapper">
                <input type="text" id="amount" />
                <div id="slider-vertical"></div>
            </div>
            <canvas id="canvas" width=300 height=300></canvas>
        </div>
    </body>

    <script>

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        var startingValue=0;
        var startX=0;
        var startY=50;
        var endX=275;
        var endY=300;
        var ballRadius=25;

        // handles user moving the slider
        $( "#slider-vertical" ).slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 100,
          value: startingValue,
          slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            draw(ui.value);
          }
        });

        // get an array of 100 points between start and end of line
        var points=linePoints(startX,startY,endX,endY,100);

        // draw the initial point based on the beginning slider value
        draw(startingValue);

        function draw(sliderValue){

            // get the slider value and get the point at points[slideVal]
            var point=points[sliderValue];

            // clear
            ctx.beginPath();
            ctx.clearRect(0,0,canvas.width,canvas.height);

            // draw "floor"
            ctx.beginPath();
            ctx.moveTo(startX,startY);
            ctx.lineTo(endX,endY);
            ctx.stroke();

            // draw ball
            ctx.save();
            ctx.lineWidth=2;
            ctx.beginPath();
            ctx.translate(point.x+ballRadius,point.y-11);
            ctx.rotate(sliderValue*Math.PI/20);
            ctx.arc(0,0,ballRadius,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0,0,ballRadius,0,Math.PI,false);
            ctx.closePath();
            ctx.fillStyle="lightblue";
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }


        function linePoints(x1, y1, x2, y2, frames) {
            var dx = x2 - x1;
            var dy = y2 - y1;
            var length = Math.sqrt(dx * dx + dy * dy);
            var incrementX = dx / frames;
            var incrementY = dy / frames;
            var a = new Array();

            a.push({ x: x1, y: y1 });
            for (var frame = 0; frame < frames - 1; frame++) {
                a.push({
                    x: x1 + (incrementX * frame),
                    y: y1 + (incrementY * frame)
                });
            }
            a.push({ x: x2, y: y2 });
            return (a);
        }

    </script>

</html>
于 2013-05-27T20:09:00.343 回答