草庐IT

javascript - beginPath() 和 closePath() 究竟做了什么?

coder 2023-08-11 原文

我的问题是关于 context.beginPath()context.closePath()。下面的代码将在屏幕周围画一个圆弧,直到它消失,然后是一个小点,我会注释掉它,因为它是一个我不知道如何包含的 .jpg。

我的问题是 beginPath() 和 closePath() 究竟做了什么?

如果我将它们注释掉,我会得到一个与我预期不同的疯狂结果。我在互联网上看过,但没有看到这样的结果。

有问题的代码:

function drawTheBall() {
    context.fillStyle = "#00AB0F"; //sets the color of the ball
    context.beginPath();
        context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
    context.closePath();
    context.fill();
}

下面的工作代码

HTML-Javascript

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In Simple Geometric Spiral </title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {
    canvasApp();
}

function canvasSupport () {
    return Modernizr.canvas;
}

function canvasApp() {
    var radiusInc = 2;
    var circle = {centerX:250, centerY:250, radius:2, angle:0, radiusInc:2}
    var ball = {x:0, y:0,speed:.1};
    var points = new Array();

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

    var pointImage = new Image();
    pointImage.src = "point.png";   <-- Comment this line out

    if (!canvasSupport()) {
        return;
    }

  function erraseCanvas() {
     context.clearRect(0,0,theCanvas.width,theCanvas.height);
  }

  function drawPathPoints() {
    //Draw points to illustrate path
    points.push({x:ball.x,y:ball.y});
    for (var i= 0; i< points.length; i++) {
        context.drawImage(pointImage, points[i].x, points[i].y,1,1);
    }
  }

  function drawTheBall() {
    context.fillStyle = "#00AB0F"; //sets the color of the ball
    context.beginPath();
        context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
    context.closePath();
    context.fill();
  }

  function buildBall() {
    ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
    ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
    circle.angle += ball.speed;
    circle.radius += radiusInc; 
  }

  function  drawScreen () {
    erraseCanvas();
    buildBall();
    drawPathPoints();
    drawTheBall();
  }

    function gameLoop() {
        window.setTimeout(gameLoop, 20);
        drawScreen()    
    }

    gameLoop();
}


</script>

</head>
<body>  
<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>

</body>
</html>

最佳答案

beginPath()

beginPath() 清除当前内部路径对象及其子路径,其中积累了line、rect、arc、arcTo等路径操作,不管是填充还是描边.

closePath()

closePath() 将当前路径或 子路径 位置与使用 beginPath() 创建的路径上的第一个点连接起来> 或 moveTo()(如果已使用)。后者在当前主路径上创建一个子路径和only this sub-path gets closed .

一些方法为你做了一个隐式和临时的 closePath() ,例如 fill()clip() 这意味着它不需要对于那些电话。在任何情况下,它都必须在 调用 stroke()(或 fill(),如果您选择使用它)之前调用。

如果将此方法视为“关闭循环”,而不是结束或关闭它不会结束或关闭的路径 [object],则可能会更好地理解此方法。

关于javascript - beginPath() 和 closePath() 究竟做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22852071/

有关javascript - beginPath() 和 closePath() 究竟做了什么?的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996?但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  6. ruby - ruby 中的 TOPLEVEL_BINDING 是什么? - 2

    它不等于主线程的binding,这个toplevel作用域是什么?此作用域与主线程中的binding有何不同?>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是,TOPLEVEL_BINDING始终引用Binding的预定义全局实例,而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层,它们都包含相同的绑定(bind),但它们不是同一个对象,您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  7. ruby - Infinity 和 NaN 的类型是什么? - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN?它们是对象、关键字还是其他东西? 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串? - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?

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

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

随机推荐