程序员经验分享-hwhale

在 html5 Canvas 上移动对象

2024-04-07

我使用 fillText 选项在 html5 canvas 对象上放置了一个文本，问题是我需要移动文本位置或更改已渲染文本的颜色。

很快我需要知道如何操作画布元素的特定子元素


这将在画布上移动一个小圆圈

var can = document.getElementById('canvas');
can.height = 1000; can.width = 1300;
var ctx = can.getContext('2d');
var x = 10, y = 100;
ctx.fillStyle = "black";
ctx.fillRect(700, 100, 100, 100);

function draw() {
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(250,0,0,0.4)';
    ctx.fill();

    x += 2;
    ctx.fillStyle = "rgba(34,45,23,0.4)";
    ctx.fillRect(0, 0, can.width, can.height);
    requestAnimationFrame(draw);
    //ctx.clearRect(0,0,can.width,can.height);
}
draw();
<canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

canvas

在 html5 Canvas 上移动对象 的相关文章

  • 进行 URL 重写

    当我点击网站上给定条目的评论部分时 URL 如下所示 http www com comments index php submission Portugal 20Crushes 20North 20Korea submissionid 62

  • 运行玩笑测试时，Firebase 在signInAnonymously() 上抛出“auth/network-request-failed”

    我正在使用 firebase 为我的应用程序 使用 create react app 构建 编写一些测试 并且我正在尝试匿名登录我的测试数据库 但认证失败 然而 所有其他 Firebase 操作 CRUD 都工作得很好 我还可以从在浏览器中

  • Firebase 的云功能：序列化 Promise

    在 onWrite 处理程序中 我想执行多次读取 操作一些数据 然后存储它 我对 Promise 概念还很陌生 关于 Firebase 在完成之前不会终止我的查询 我对以下 Promise 处理是否安全 exports test funct

  • 一键切换两个复选框，无需js

    有没有办法切换两个combined一键点击复选框 我有一个小日历 我想用复选框选择几周 一周可以是两个月 所以同一周我有两个复选框 我怎样才能安全地将它们结合起来 我正在使用这个抽象 HTML

  • 如何将Javascript代码转换为Jquery代码？

    请帮助我 这是Javascript代码 我需要将此代码更改为Jquery eval parent document forms 0 strKey intDimensionId value strIds intDimensionId 高性能

  • Protractor：如何从字符串中删除多余的空格，就像我们在 java getText.trim() 中使用的那样

    如何从字符串中删除多余的空格 就像我们在中使用的那样java getText trim in 量角器 我这样使用 var columnvalue rows get 9 getText var columnvalue1 columnvalue

  • jQuery - 如何确定哪个链接被点击

    我有一个简单的 PHP 代码 可以生成n以下代码的副本 p class center Click Here to See Data p div class divSDB L2 div 它是使用 PHP 生成的 因此副本的数量预先未知 在另一

  • Select2 基本示例不起作用

    我想得到select2使用 symfony2 脚本的库 我正在尝试实现提供的基本示例https select2 github io examples html https select2 github io examples html pa

  • 显示文本，一条虚线，然后显示跨越页面宽度的更多文本[重复]

    这个问题在这里已经有答案了 我想要显示一些文本 然后是虚线 然后在同一行上显示更多文本在 HTML 页面上 例如 Name Engineer 我希望 名称 与左边框左对齐 工程师 与右边框右对齐 然后浏览器能够用重复的点填充两者之间的间隙

  • Redux 中的排队操作

    我目前遇到的情况是我需要连续运行 Redux Actions 我看过各种中间件 比如 redux promise 看起来不错如果您知道触发根操作 由于缺乏更好的术语 时的连续操作是什么 本质上 我想维护一个可以随时添加的操作队列 每个对象在

  • 使用 CSS 定位文本节点

    我正在研究容器对象的 CSS 我大部分时间都在工作 具体来说 我正在查看测试用例 1 2 和 3 它们都有文本节点 有没有办法像对待任何子元素一样对待文本节点 有什么方法可以调整 CSS 以使文本节点及其兄弟节点正常工作吗 除非有一个 CS

  • PapaParse 与 Angular JS

    喜欢 PapaParse 漂亮的 CSV 解析器和解解析器 任何人都可以帮助我将其与 Angular JS 结合起来吗 我喜欢让 PapaParse 以 Angular 方式工作 正在尝试解决方案 实际上我没有做任何花哨的事情来加载它 只需

  • IE8 中 JavaScript 日期未定义/NaN

    我用它来测试日期输入是否距今天的日期少于 7 天 它适用于除 IE9 之外的所有浏览器 var today new Date

  • 需要帮助在 D3.js 条形图中将 x 轴刻度与条形对齐

    我有一个可用的线性条形图D3 js http d3js org 它也有基于时间的 x 轴 条形图绑定到计数属性 而轴绑定到日期属性 轴上的刻度未与条形对齐 知道如何将它们两者排列起来吗 这是 jsFiddle http jsfiddle n

  • 如何在闪亮的仪表板侧栏中手动展开子菜单

    我正在尝试手动展开闪亮仪表板侧边栏中的子菜单 这updateTabItems该功能仅适用于普通菜单 不适用于嵌套菜单 这是基本示例 修改自updateTabItems文档 来显示问题 如果我单击 切换选项卡 它会切换菜单 但不会展开具有子菜

  • React-Router v4 渲染错误的组件但匹配正确

    我有一个带有两个按钮的侧边栏 测试 和 关于 Test 火箭图标 呈现在 test 处 About 主页图标 呈现在 处 它们都位于应用程序的根目录并嵌套在组件内 当我从 开始并单击 链接到 test 时 它总是加载 关于 组件 当我检查

  • 在多个 html 文件上运行 javascript

    我有一个包含 1000 个 html 文件的文件夹 我必须使用 xpath 从每个 html 中删除某些节点 所以我已经制作了javascript 我无法打开每个文件并通过 Firefox 控制台运行 javascript 我用的是linu

  • 在 JavaScript 中，将 NodeList 转换为数组的最佳方法是什么？

    DOM 方法document querySelectorAll 和其他一些 返回一个NodeList 对列表进行操作 例如使用forEach the NodeList必须首先转换为Array 转换的最佳方式是什么NodeList to an

  • 如何获取firestore集合下的文档数量？ [复制]

    这个问题在这里已经有答案了 我想获取 firestore 集合中的文档总数 我正在制作一个论坛应用程序 所以我想显示每个讨论中当前的评论量 有类似的东西db collection comments get lenght或类似的东西 随着si

  • 未捕获的类型错误：未定义不是 indexOf 上的函数

    我目前有此代码来检查特定 ID 的网站 URL GET 选项 但每当运行此代码时 我都会收到一个奇怪的错误 Uncaught TypeError Undefined is not a function 这是我的代码 如果我能得到关于这个问题

随机推荐

  • Java：将出生数据转换为天数

    我真的需要一些关于具体任务的帮助 用户输入出生数据 YYYY MM DD 程序会告诉您您的年龄 以天为单位 控制台中的输出将是 例如 您出生于 1981 年 11 月 6 日 您已经 7068 天了 我已经重写了我的代码大约 20 次但没有

  • 使用 HTML 5 的进度条（下载）

    我正在开发一个需要从数据库下载内容的项目 通常使用手机 高端智能手机 访问该网站 我想知道是否可以在使用 HTML5 下载内容的过程中添加进度条 以便在执行此操作时会在整个屏幕上出现一个灯箱 并且只显示进度条 可以使用 XMLHttpReq

  • NSArray 越界检查

    菜鸟问题 检查 NSArray 或 NSMutableArray 的索引是否存在的最佳方法是什么 我到处找都没有结果 这是我尝试过的 if sections arr objectAtIndex 4 or sections arr objec

  • 为什么 Firefox 会截断我的 中的文本？

    我有一个简单的

  • 芹菜“重试”并更新参数

    考虑一个任务将列表作为参数并处理列表中的每个元素 这可能会成功也可能会失败 在这种情况下 如何仅对失败的元素进行 重试 Example app task bind True def my test self my list list new

  • 在 bash 脚本中模拟用户输入[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我正在创建自己的 bash 脚本 但目前陷入困境 基本上 该脚本将用于在 CentOS 中自动设置服务器 某些软件通常要求用户输入密码 我希望脚本将我

  • 将复选框添加到 ASP.NET 网格视图

    我正在尝试在我的网络应用程序中启用批量删除 我显示的数据位于GridView我想添加一列 其中每一行包含一个复选框 或任何替代选项 用户可以标记要删除的行 然后立即删除所有行 当我添加一个CheckBoxField 它必须绑定到我自然在数据

  • 删除元素时映射迭代器如何失效？ [复制]

    这个问题在这里已经有答案了 使用擦除方法时 迭代器何时以及如何在映射中失效 例如 std map lt int int gt aMap aMap 33 1 aMap 42 10000 aMap 69 100 aMap 666 1 std m

  • WordPress 到 Jekyll 脚本抛出错误

    我已经为这个问题苦苦挣扎了一天左右 但无法弄清楚发生了什么 我正在尝试运行一个脚本将我的 Wordpress sql 导入 Jekyll 并将所有内容转换为 Markdown 但每次我运行脚本 在 Mac 和 Ubuntu 上 时都会收到错

  • Python定时器回调方法

    from threading import Timer class test timer def init self self awesum hh self timer Timer 1 self say hello args WOW def

  • 在 Grails 中使用 Groovy++ 的经验

    有人尝试过在幕后实现一个包含 Groovy 的 Grails 解决方案吗 Groovy 使用 Groovy 1 7 5 并包含将 G 与 Grails 集成的插件

  • 当键盘在 Flutter TextField 中可见时，键盘顶部有大量空白

    这是我的代码 build BuildContext context return new Scaffold body new SafeArea child new ListView builder itemBuilder itemBuild

  • 动态更改从数组创建的按钮的按钮标签和标题（快速）

    我的环境 下面的代码是在我公司 iPad 上的 swift Playgrounds 4 中编写的 项目目标 我正在努力改进学校的课堂管理工具 它基本上是一个纸质交通灯 每个学生都有一个衣夹 我想要一个应用程序 其中我的 28 个学生都由一个

  • pthread_mutex_t 可以在内存中移动吗？

    我想构建一个动态分配的 pthread mutex 数组 该数组将随着时间的推移而增长 添加更多互斥体 我的问题是 如果数组通过 realloc 移动 它们是否仍然有效 我担心的是 pthread mutex init 可能会以某种方式设置

  • 更新具有一个字段的当前最高（最大值）值的行[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我有这个 SQL 查询 这是错误的

  • 在Java中，如何从资源构造文件？

    File 在其构造函数中采用 String 和 URI getClass getResource 返回 URL 和getResourceAsStream 返回输入流 有没有办法从资源构造文件 你不能 至少在资源位于 Jar 内的标准情况下不

  • JPA/Hibernate - 与子实体一起分离实体

    我使用 JPA 2 和 Hibernate 3 6 8 作为实现 假设我们有一个实体Foo Entity public class Foo OneToOne private Bar bar 我需要将整个实体图从会话中分离出来 当我这样做时e

  • 使用 Java 将数据从 Cassandra 中的一个表复制到另一个表

    我正在尝试将所有数据从一个列族 表 移动到另一个列族 由于两个表都有不同的描述 我必须从 table 1 中提取所有数据并为 table 2 创建一个新对象 然后执行批量 aync 插入 我的 table 1 有数百万条记录 因此我无法直接

  • 如何使用Lua脚本语言打开Web套接字？

    作为初学者 我想在基于 Linux 的服务器上使用 Lua 打开一个 Web 套接字 该服务器应允许 Android 客户端连接到它 你能给我一些用Lua打开网络套接字的示例代码吗 您两周前已经问过同样的问题并得到了回答 LUA 脚本 We

  • 在 html5 Canvas 上移动对象

    我使用 fillText 选项在 html5 canvas 对象上放置了一个文本 问题是我需要移动文本位置或更改已渲染文本的颜色 很快我需要知道如何操作画布元素的特定子元素 这将在画布上移动一个小圆圈 var can document ge

热门标签