草庐IT

javascript - JS Canvas - 以指定 Angular 画线

coder 2024-07-25 原文

我想制作一个应用程序，让球按照鼠标击中它的 Angular 移动。因此，如果您从左上象限以 30 度 Angular 向下滑动鼠标(我猜那将是 180-30 = 150 度 Angular )，它会以这种方式击球。我一直在这样画我的线条:

        function drawAngles () {
            var d = 50; //start line at (10, 20), move 50px away at angle of 30 degrees
            var angle = 80 * Math.PI/180;
            ctx.beginPath();
            ctx.moveTo(300,0);
            ctx.lineTo(300,600); //x, y
            ctx.moveTo(0,300);
            ctx.lineTo(600,300);
            ctx.moveTo(300,300);
            ctx.lineTo(600,100);
            ctx.arc(300,300,300,0,2*Math.PI);
            ctx.stroke();
        }

但这并没有让我知道 Angular 是多少。

然后我以那个 Angular 移动球(现在，我在没有鼠标交互的情况下为其设置动画)

        function getAngleX (x) {
            return x = x + (50 * Math.cos(Math.PI/6));          
        }
        function getAngleY(y) {
            return  y = y + (50 * Math.sin(Math.PI/6));
        }

            //just animate this box to move at an angle from center down at 30 degrees
            $(".anotherBox").mouseenter(function(e) {
                pos =  $(this).position();
                box2X = pos.left;
                box2Y = pos.top;    

                $(this).animate({
                    //top : $(window).outerHeight(),
                    top : getAngleY(box2Y)+"px",
                    left: getAngleX(box2X)+"px",
                }, "slow");     
            });

那么如何以指定的 Angular 画一条线呢？我想确保我的球沿着那条路走。

最佳答案

您可以使用不同的方法来实现这一点，但如果您想使用相同的基础来移动和绘制，那么这种方法可能很适合。

首先我们使用一个函数根据 Angular (以弧度为单位)获取 x 和 y 的步长值:

function getSteps(angle) {

    var cos = Math.cos(angle),
        sin = Math.sin(angle);

    return {
        x: cos -sin,
        y: sin + cos
    }
}

然后使用这些步进值，我们可以缩放它们以获得终点，或逐渐缩放它们以沿线为对象设置动画。一个简单的循环可能如下所示(仅作为示例):

function loop() {

    var x = i * step.x,  // scale using i
        y = i * step.y;

    ctx.fillRect(200 + x, 200 + y, 2, 2); // add to origin start point 200, 200

    i += 1;              // increase i

    if (i < length) requestAnimationFrame(loop);
}

Live demo

如果您只想以特定 Angular 画一条线，您可以改为执行以下操作:

function lineAtAngle(x1, y1, length, angle) {
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 + length * Math.cos(angle), y1 + length * Math.sin(angle));
}

然后抚摸它。

希望这对您有所帮助!

关于javascript - JS Canvas - 以指定 Angular 画线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22977372/

javascriptAngularsectionfunctionmathcanvasgeometry

有关javascript - JS Canvas - 以指定 Angular 画线的更多相关文章

  1. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  2. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  3. ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

  4. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

  5. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 引用具有指定索引的枚举器值 - 2

    假设我有一个可枚举对象enum，现在我想获取第三个项目。我知道一种通用方法是转换成数组，然后使用索引访问，如:enum.to_a[2]但这种方式会创建一个临时数组，效率可能很低。现在我使用:enum.each_with_index{|v,i|breakvifi==2}但这非常丑陋和多余。执行此操作最有效的方法是什么？ 最佳答案 你可以使用take剥离前三个元素，然后剥离last从take给你的数组中获取第三个元素:third=enum.take(3).last如果您根本不想生成任何数组，那么也许:#Ifenumisn'tanEnum

  8. ruby - 为什么必须明确指定 2 个参数才能 curry :> - 2

    考虑这个，它工作正常::>.to_proc.curry(2)[9][8]#=>true,because9>8然而，即使>是一个二元运算符，如果没有指定的元数，上面的代码将无法工作::>.to_proc.curry[9][8]#=>ArgumentError:wrongnumberofarguments(0for1)为什么两者不等价？注意:我特别想用提供的一个参数创建中间柯里化(Currying)函数，然后然后调用然后用第二个参数调用它。 最佳答案 curry必须知道传入的过程的数量，对吧？:-1来自arity的负值令人困惑，但基本上

  9. ruby - `gem install` 多个 gem 的语法是什么，为每个 gem 指定版本？ - 2

    如何使用geminstall同时安装多个gem，同时指定我想要的版本？例子:geminstallakami-v1.2.0--ignore-dependenciesgeminstallatomic-v1.1.14--ignore-dependenciesgeminstallaws-s3-v0.6.2--ignore-dependenciesgeminstallbackports-v3.3.0--ignore-dependenciesgeminstallbrendanlim-sms-fu-v1.0.0--ignore-dependenciesgeminstallbuilder-v3.1.3

  10. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

随机推荐