程序员经验分享-hwhale

移动圆弧上出现半径线

2023-12-09

我试图创建这些移动的形状，该形状由半圆形和对称的上弧和下弧组成。 它们应该只是前面的形状，但现在当它们移动时，后面会拖着一条像尾巴一样的线。尾部未知的输出形状

这些线似乎来自上下弧的 moveTo 部分，但我不知道如何解决它。 我应该在哪里改变才能摆脱它？

function Fish(x, y, dx, dy, radius){

    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = 30;
    
    this.draw = function(){

        c.beginPath();
        c.arc(this.x/0.6, this.y, this.radius, Math.PI * 1.5, Math.PI * 0.5, false)
        
        //Upper Arc
        c.moveTo(this.x, this.y);
        c.arc(this.x/0.6, this.y+(3*this.radius), this.radius*4, Math.PI * 229/180, Math.PI * 1.5, false)
        
        //Lower Arc
        c.moveTo(this.x, this.y);
        c.arc(this.x/0.6, this.y-(3*this.radius), this.radius*4, Math.PI * 131/180 , Math.PI * 0.5, true)
        c.strokeStyle = "green";
        c.stroke();

    }

这是因为arc方法内部跟踪一个lineTo从当前指针的位置到弧的开头（由 cx、cy 定义）and起始角度）。

要解决这个问题，您需要moveTo那个位置。

这是一个使用半圆的更简单的演示startAngle设置为 0 rad：

const canvas = document.createElement( "canvas" );
document.body.append( canvas );
const ctx = canvas.getContext( "2d" );
ctx.lineWidth = 2;

const cx = 50;
const cy = 50;
const rad = 30;

ctx.beginPath();
ctx.moveTo( cx, cy );
ctx.arc( cx, cy, rad, 0, Math.PI );
ctx.strokeStyle = "red";
ctx.stroke();

ctx.translate( 80, 0 );
const first_point_x = cx + rad; // startAngle is 0
                                // so we just have to add 'rad'
                                // to find the x coord
ctx.beginPath();
ctx.moveTo( first_point_x, cy );
ctx.arc( cx, cy, rad, 0, Math.PI );
ctx.strokeStyle = "green";
ctx.stroke();

所以你必须计算弧线开始点的坐标moveTo那一点。
这是可行的，但我对 trigo 不是最好的，而且您的值非常复杂，因此，这里有一个使用 Path2D 对象的解决方法。
If the arc命令是子路径的第一个，它会直接moveTo该初始点（因为还没有“当前指针的位置”）。
因此，我们可以将所有弧初始化为独立的 Path2D 对象，仅由这些对象组成arc命令。然后我们只需将这些 Path2D 对象合并到最后一个对象中并绘制它：

const canvas = document.createElement("canvas");
document.body.append(canvas);
const c = canvas.getContext("2d");
c.lineWidth = 2;
const fish = new Fish(150, 50, 50, 50, 50);
fish.draw();

function Fish(x, y, dx, dy, radius) {

  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = 30;

  this.draw = function() {
    const p1 = new Path2D();
    p1.arc(this.x / 0.6, this.y, this.radius, Math.PI * 1.5, Math.PI * 0.5, false)
    //Upper Arc
    const p2 = new Path2D();
    p2.arc(this.x / 0.6, this.y + (3 * this.radius), this.radius * 4, Math.PI * 229 / 180, Math.PI * 1.5, false)
    //Lower Arc
    const p3 = new Path2D();
    p3.arc(this.x / 0.6, this.y - (3 * this.radius), this.radius * 4, Math.PI * 131 / 180, Math.PI * 0.5, true)
    // merge in a single Path2D object

    const path = new Path2D();
    path.addPath(p1);
    path.addPath(p2);
    path.addPath(p3);
    
    c.strokeStyle = "green";
    c.stroke(path);
    
  }
}

但在你的情况下，你可以很容易地达到预期的结果，通过改变你绘制路径的顺序并且从不调用moveTo.

const canvas = document.createElement("canvas");
document.body.append(canvas);
const c = canvas.getContext("2d");
c.lineWidth = 2;
const fish = new Fish(150, 50, 50, 50, 50);
fish.draw();


function Fish(x, y, dx, dy, radius) {

  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = 30;

  this.draw = function() {

    c.beginPath();
    c.arc(this.x / 0.6, this.y, this.radius, Math.PI * 1.5, Math.PI * 0.5, false)
    // Lower Arc    
    c.arc(this.x / 0.6, this.y - (3 * this.radius), this.radius * 4, Math.PI * 0.5, Math.PI * 131 / 180, false)
    // Upper Arc
    // (inverse startAngle and endAngle + switch swipe to false)
    c.arc(this.x / 0.6, this.y + (3 * this.radius), this.radius * 4, Math.PI * 229 / 180, Math.PI * 1.5, false)

    c.strokeStyle = "green";
    c.stroke();

  }
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

Animation

canvas

移动圆弧上出现半径线 的相关文章

随机推荐

  • 阻止外部访问 PHP 脚本但允许 AJAX

    我读了很多关于 htaccess 规则 检查标头 使用加密等的内容 但我还没有找到我想要的答案 我知道 假设服务器设置正确 您将无法使用 AJAX 访问我珍贵的 PHP 脚本 我尝试检查是否定义了一个访问变量 该变量不允许地址栏访问 但也阻

  • 在express.js上启用HTTPS

    我正在尝试让 HTTPS 在 Express js 上为 Node 工作 但我无法弄清楚 这是我的app js code var express require express var fs require fs var privateKe

  • Android KSOAP2 抛出 SocketTimeoutException

    我在我的 Android 项目中使用了上述 SOAP 对象库 以便连接到 NET Web 服务 该应用程序运行良好 直到我做了一些更改并增加 减少了目标 API 它开始抛出 SocketTimeoutException 并且不会消失 我在用

  • 选择firstChild和空格问题

    我有一个这样的标记 table thead tr td Hello td tr thead table 但是当我尝试选择第一个孩子时 table 它返回空格 正如预期的那样 var ss document getElementById my

  • 样式下拉（选择）框

    我知道使用 jquery 可以制作一些看起来像选择框的东西 这样我就可以让它看起来像我想要的那样 然而 如果只有 css 我有多少控制权 我使用了边框 内边距和宽度 最终结果看起来很棒 唯一让我烦恼的是掉落的部分 这有什么控制吗 有填充看起

  • 调用open时如何调用sys_open而不是sys_openat

    我编写了一段代码来生成系统调用 void open test int fd const char filepath if fd 1 printf Open s Failed n filepath else printf Successful

  • 带有有效负载或表单数据的 DELETE 请求会导致错误请求

    我正在使用 Java Jersey 2 17 构建 RESTful Web 服务 客户端 我正在使用 ExtJS 5 进行开发 我的服务课程 主程序 java public class Main public static final St

  • 如何使用正则表达式通过 jQuery 通过 ID 选择元素？

    我有以下输入元素

  • 以编程方式启用/禁用多点触控手指输入？

    我有一台运行 Windows 7 且支持多点功能的平板电脑 然而 当使用手写笔并距离显示器太远时 我经常会不小心用手指敲击它 从而导致不必要的鼠标点击 解决方案是导航到 控制面板 笔和手指输入 手指输入 然后停用 使用手指作为输入设备 复选

  • mysql负载测试工具

    我想计算表的每行大小 有没有可用的工具 还有人知道任何负载测试工具吗 提前致谢 问候 玛纳西 计算平均行大小 SHOW TABLE STATUS FROM databasename LIKE pattern 超级一击是 MySQL 和 Po

  • 检测耳机是否插入 iOS 设备

    iOS 设备上有互动电影 当电影开始时 点击 视频开始的那个人会问你插入耳机 如果插入 那么视频应该自动跳到故事 直接转到视频故事 我应该怎么办 以及如何编写代码 首先 您必须注册 AudioRoute 更改 AudioSessionAdd

  • JS：在文本中查找 URL，创建链接

    下面用 JS 重写的 PHP 代码是什么 以便文本 blob 内的 url 链接可以替换为 html 链接 我已经开始了jsfiddle

  • 更改PIL模块中的图像颜色

    我正在尝试改变颜色的强度以获得不同颜色的图像 import PIL from PIL import Image from PIL import ImageEnhance from PIL import ImageDraw read imag

  • 如何禁止从 Angular JS 下拉列表中选择特定选项？

    我想从 AngularJS 下拉列表中禁用特定选项 它应该列在下拉列表中 但不应允许选择它 所以我需要禁用它 我的文件 tpl html

  • 重复本地通知不更新内容

    我制作了一个应用程序 每天上午 9 点发送一条本地通知 向用户显示随机素数 问题是显示的数字始终相同 创建通知请求的代码仅被调用一次 这是我所期望的 因为通知是重复的 那么我如何更新其内容 我可以提供生成随机素数的代码 但我已经测试过它并且

  • 使用 Ivy Bridge 和 Haswell 循环展开以实现最大吞吐量

    我正在使用 AVX 同时计算八个点积 在我当前的代码中 我做了这样的事情 在展开之前 常春藤桥 桑迪桥 m256 areg0 mm256 set1 ps a m for int i 0 i

  • 确定字符串是否具有唯一字符

    该问题要求 实现一种算法来确定字符串是否具有所有唯一字符 我看到了解决方案 但不太明白 public boolean isUniqueChars String str if str length gt 256 return false bo

  • 如何在 R 中为 dist 函数指定其他方法？

    在 R 中 dist 函数的文档中有以下内容 method 要使用的距离测量 这必须是 euclidean maximum manhattan canberra binary 或 minkowski 之一 可以给出任何明确的子字符串 但我需

  • 如何删除 woocommerce 添加的购物车项目并重定向到结帐？

    我有一个用于 添加资金 的 Woocommerce 表格 它有一个金额输入字段 20 美元 30 美元 等 和一个提交按钮 该按钮重定向到购物车页面 其中输入的金额为总计 重定向到结账正常 但如果用户放弃购物车并尝试再次订购 则购物车商品不

  • 移动圆弧上出现半径线

    我试图创建这些移动的形状 该形状由半圆形和对称的上弧和下弧组成 它们应该只是前面的形状 但现在当它们移动时 后面会拖着一条像尾巴一样的线 尾部未知的输出形状 这些线似乎来自上下弧的 moveTo 部分 但我不知道如何解决它 我应该在哪里改变

热门标签