javascript - html5-canvas 使用 javascript 在线斜率上移动球-6ren

javascript - html5-canvas 使用 javascript 在线斜率上移动球

转载作者：行者123 更新时间：2023-11-30 13:02:44

我想在斜线上移动一个球。我已经为曲线路径完成了。我正在尝试对线路做同样的事情。我已经给出了我的代码。在我的代码中，我正在绘制一条曲线并使用单一功能“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 用于在 slider 移动时画一条线。在那条线上我想移动一个球。此代码适用于 chrome。提前致谢。

最佳答案

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

fiddle :http://jsfiddle.net/m1erickson/2j9zc/

enter image description here

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

这是代码和 fiddle :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>

关于javascript - html5-canvas 使用 javascript 在线斜率上移动球，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16778676/

文章推荐： ios - 在 Swift 中，如何在闭包中设置函数的返回值？

文章推荐： c# - aspx 页面是否有相当于 "partial class"的值？

文章推荐： arrays - 如何将数组转换为元组？

文章推荐： c# - 启动画面显示在应用程序中间

java - 球/圆碰撞问题
我试图让球弹起，或者在它们碰撞时反转方向。我让它检查移动方法中的碰撞。它检查两个球之间是否发生碰撞，如果发生碰撞，它将反转速度。问题是，有时球会互相穿过，主要是较小的球。球要么弹跳得早，要么弹得晚，要
javascript - 计算结果向量弹跳圆/球
我一直在努力根据 2 个弹跳圆/球获得正确的矢量值。我知道他们什么时候反弹；使用毕达哥拉斯，但后来我迷路了。我知道我可能不得不使用三 Angular 函数 cos/sin/tan2。情况，以我的形象
audio - 当其他物体(球)击中立方体时播放声音
using UnityEngine; using System.Collections; public class audio : MonoBehaviour { public AudioClip
java - 表面有随机点的 3d 球
我正在尝试创建 3d 球体的动画，该动画是由该球体表面上的随机点制作的。这是我的代码，我在其中创建 500 个随机极点，然后将这些极坐标转换为笛卡尔坐标，然后将 X 和 Y 坐标映射到屏幕。这就是我得
c++ - 球 jar 容积的最终答案无效
我创建的这个程序应该基本上使用公式 V=Pi*h^2(3r-h)/3 但我的最终答案并没有相加。例如:如果我用 1 代替半径，用 2 代替高度，我应该得到 4.18，但通过程序我得到 -1。 #in
javascript - 如何将图像添加到此 Canvas 球？
我正在尝试制作一个简单的游戏，但如果我需要弹跳球的图像，我该怎么做呢？我正在做这个- function draw() { ctx.clearRect(0, 0, 300, 300);
r - 如何画一个里面有双色粒子的 Crystal 球
我只是提出一个有可能结束的想法。我需要画一个 Crystal 球，红色和蓝色粒子随机分布在其中。我想我必须使用 photoshop，甚至尝试在图像中制作球，但由于这是用于研究论文并且不必很花哨，我想知
java - 球-球相交和圆-球相交
我有圆与圆相交的代码。但我需要将其扩展到 3-D。你能帮我写函数吗？ static class Point{ double x, y, z; int dimension; Po
javascript - 球-三 Angular 碰撞
目标:我有一个三 Angular 形的球。球具有初始位置和速度。我试图弄清楚球会击中三 Angular 形的哪一边。我试过的: I derived a formula通过参数化球的路径和三 Angu
iphone - 如何在box2d iPhone中手动制作一个动态物体(球)进入盒子
由于我是 cocos2d 的新手，而且我很挣扎。任何人都可以建议我如何解决这个问题。我有 3 个盒子(它们是运动体) 还有多个球(它们是动态物体)，每个球都有一个标签值(盒子编号)。我在射球位置和
javascript - JavaScript 中的魔术 8 球
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this qu
rpm - 创建一个 RPM 来简单地解压 tar 球
我正在为 rpm 编写一个 .spec 文件，它只是将一个 tar 球解压到文件系统上的某个目录中那么我把原来的 tar 球放在哪里呢？我看到的所有示例都是从互联网上下载原始 tar 球的。但就我而
javascript - THREE.js - 旋转移动 3D 球
我是 THREE.js 的新手，对物理知识知之甚少 - 但我正在尝试构建一个足球游戏引擎(从顶部看)，现在我正在为球的运动而苦苦挣扎。当尝试将球从一侧移动到另一侧时，旋转始终朝向一个方向，我不明白如
android - 在屏幕上 move 球。加速度计。弹跳也
我必须在 Android 中开发一个在屏幕上 move 球的应用程序。我需要用加速度计 move 球。我有这段代码，但球绕过边界并且没有反弹。 package com.example.test
java - 协助在 Java 中创建网格/球(对象？)
我正在尝试创建一个 Roomba 程序，其中有一个球在屏幕上弹跳，以清洁它经过的瓷砖。该程序应该从所有灰色瓷砖开始，当球经过它们时，瓷砖就会变成白色。目前我有一个可以到处弹跳的球和一个创建 5x5 网
html - 如何将 4 个 absolute-divs(球)居中放置在我的屏幕中间？
我正在尝试为我当前的作业创建一个加载屏幕效果。它需要我们创建一个与 position: fixed .以此资金为背景。使用这个 div，有 4 个与 position: absolute . 我们
javascript - 通过鼠标单击场景来模拟 2d js Canvas 上的物理 3d 球 throw
我想将一个球(带有图像)扔到一个二维场景中，并在它到达一定距离时检查它是否发生碰撞。但我无法让它正确地“飞”。似乎这个问题已经被问过一百万次了，但随着我发现的越多，我就越困惑..现在我关注了this
java - 我正在为我的类(class)使用 java 在 JGrasp 中制作一个神奇的 8 球。我如何让我的代码运行？我不知道我的错误是什么或如何解决？
这是我的代码 import java.util.*; import javafx.application.Application; import javafx.scene.Scene; import

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - html5-canvas 使用 javascript 在线斜率上移动球