0

我在滑块运动上画了一条弧线。如果您移动滑块，将绘制弧线。除了带有画布 id canvasTwo 的圆弧外，我还画了一条线。我试图在滑块的移动上画出这条线。因此，当滑块移动时，将绘制线。目前仅针对 arc 发生。任何帮助。请

            <!doctype html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>CH5EX10: Moving In A Simple Geometric Spiral </title>

                    <style>
                        .wrapper {
                            margin: 0 auto;
                            width: 1000px;
                        }
                        .uppleft {
                            float: left;
                            width: 1000px;
                            position: relative;
                            margin: 0 0 500px 10px;
                        }
                        .dnleft {
                            float: left;
                            width: 1000px;
                        }
                        .clear {
                            clear: both;
                        }
                    </style>

                </head>
                <body>
                    <div class="wrapper">
                        <div class="uppleft">

                            <canvas id="canvasOne" width="300" height="300"width="500" height="500" style="position:absolute; left:5px; top:10px; border:1px solid red;">
                                Your browser does not support HTML5 Canvas.
                            </canvas>
                            <canvas id="canvasTwo" width="300" height="300" style="position:absolute; left:250px; top:30px; border:1px solid red;">
                                Your browser does not support HTML5 Canvas.
                            </canvas>
                        </div>

                        <div class="clear"></div>

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

                    </div>
                </body>
                <script type="text/javascript">

                drawSlopeCurve1('canvasTwo')
                    function counterSliderNew(sID, maxValue) {

                        var slideVal = document.getElementById(sID).value;
                        //alert(slideVal);
                        if (maxValue == 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
                        };
                        if (slideVal == 0) {

                        } else if (slideVal > 0 && slideVal <= 34) {
                            erase('canvasOne');
                            drawBezier2('canvasOne', new Array({
                                x : 18.8,
                                y : 75
                            }, {
                                x : 28,
                                y : 160
                            }, {
                                x : 228,
                                y : 165
                            }), slideVal);

                        } else if (slideVal > 34 && slideVal <= 67) {
                            //alert(slideVal);
                            erase('canvasOne');
                            drawBezier2('canvasOne', new Array({
                                x : 18.8,
                                y : 75
                            }, {
                                x : 28,
                                y : 160
                            }, {
                                x : 228,
                                y : 165
                            }), slideVal);

                        } else if (slideVal > 67 && slideVal <= 100) {
                            erase('canvasOne');
                            drawBezier4('canvasOne', new Array({
                                x : 16,
                                y : 170
                            }, {
                                x : 160,
                                y : 72
                            }), slideVal);
                            //drawBezier3('canvasTwo', startPt, controlPt, endPt, position);

                        }
                    }

                    function drawBezier2(canId, points, slideVal) {

                        var canvas = document.getElementById(canId);

                        var context = canvas.getContext("2d");
                        // Draw guides
                        context.lineWidth = 2;
                        context.strokeStyle = "rgb(113, 113, 213)";
                        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 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 drawSlopeCurve1(canId) {
                        var canvas = document.getElementById(canId);
                        var context = canvas.getContext('2d');

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

                </script>

            </html>
4

1 回答 1

0

像这样更新您的slide1输入：

<input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSliderNew('slide1', '100'); drawSlopeCurve1('slide1',100);" />

像这样更新您的drawSlopeCurve1函数：

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

    var canId = 'canvasTwo';
    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();
}

（你可以为线端点 x1,y1 和 x2,y2 输入任何你想要的值）
这里的例子

于 2013-05-26T06:01:36.200 回答