在滑块的移动上画一条线

draw a line on movement of slider

本文关键字：一条 移动      更新时间：2023-09-26

我正在绘制滑块运动的弧线。如果你移动滑块，弧线将被绘制。旁边的弧与画布id画布我已经画了一条线。我试着在滑块的移动上画这条线。因此，随着滑块移动，线条将被绘制。目前只发生在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>

像这样更新你的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)
实例

相关文章：