0

スライダーを動かすと、弧を描いています。ダイナミックにしました。円弧のポイントを変更すると、描画される線も変更されます。私がラインでやりたいのと同じこと。スライダーを動かすと、線が描画されます。また、動的な手段にしたいのですが、ラインポイントを変更すると、ラインも変更されるはずです。

<!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">
        drawSlopeCurve2('canvasTwo', 16, 170, 200, 80)

        function counterSliderNew(sID, maxValue) {

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

            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);
                staticGraph5('canvasTwo');
            } else if (slideVal > 67 && slideVal <= 100) {
                erase('canvasOne');
                drawBezier2('canvasOne', new Array({
                    x : 18.8,
                    y : 75
                }, {
                    x : 28,
                    y : 160
                }, {
                    x : 228,
                    y : 165
                }), slideVal);

            }
        }

        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 drawSlopeCurve2(canId, mvx, mvy, lnx, lny) {
            var canvas = document.getElementById(canId);
            var context = canvas.getContext('2d');

            context.beginPath();
            context.moveTo(mvx, mvy);
            context.lineTo(lnx, lny);
            context.lineWidth = 0.6;
            context.stroke();
        }

    </script>

</html>

これはクロムでのみ機能します。drawSlopeCurve2('canvasTwo', 16, 170, 200, 80);この関数を使用して、スライダーの動きに線を引きたいと思います。スライダーの動きで円弧を移動するために使用した数式を探しています。

4

1 に答える 1