个人中心
gpt4 book ai didi

javascript - html5-canvas在线移动对象

转载 作者：行者123 更新时间：2023-11-29 22:13:22 24 4
gpt4 key购买 nike

我想在斜线上移动一个物体。我已经给出了我的代码。在我的第三个 div 的代码中，当我移动 slider 时，我在这条线上画了一条斜线，我想移动一个对象。我在我的第一个 div 中正在做类似的事情。我在曲线上移动物体的地方。我正在寻找一些功能，我将在其中提供要点并且对象将遵循这些要点。这是我的代码。此代码仅适用于 chrome，因为我试图将其仅用于 safari 和 chrome 浏览器。

        <!DOCTYPE HTML>
            <html>
            <head>

   <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 with bezier curve the curve is getting drawn as slider moves and also a ball in moving on that . 
            </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 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>

            <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=" drawSlopeCurve2('slide3','100'); " />
            </div>

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

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

            <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=" 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;

        }


        /**********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');
            canvas.width = canvas.width;
            //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');
            canvas.width = canvas.width;
            //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>

提前致谢。我的 jsfiddle 链接:http://jsfiddle.net/g7hWD/1/

最佳答案

您需要在函数 drawSlopeCurve1() 和 drawSlopeCurve2() 的最后添加绘图代码。最简单的方法是先修复函数 newSprite() 然后再使用它(以避免一遍又一遍地复制相同的代码块)。

在函数 newSprite() 中:

// Change that:
ctx.globalCompositeOperation = 'source-atop';

// To this:
ctx.globalCompositeOperation = "source-over";

(有关globalCompositeOperation 的更多详细信息，请参阅 here 。)

在函数 drawSlopeCurve1/2() 的末尾:

// Append this:
newSprite(canId, x, y);

另请参阅此 modified demo .

关于javascript - html5-canvas在线移动对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16812923/

24 4 0
文章推荐： javascript - 使用 TweenMax 和 KineticJS 在 javascript 中移动贝塞尔曲线路径中的对象
文章推荐： php - 将foreach循环中的多个数组POST值插入到mysql中
文章推荐： PHP MYSQL PDO 列的 SUM
文章推荐： c# - Firefox + Chrome 表格渲染问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com