程序员经验分享-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 上移动对象 的相关文章

  • 如何获取 RxJSSubject 或 Observable 的当前值？

    我有 Angular 2 服务 import Storage from storage import Injectable from angular2 core import Subject from rxjs Subject Inject

  • 未捕获的类型错误：this.props.signinUser 不是一个函数（…）

    src actions index js import axios from axios const ROOT URL http localhost 3090 export function signinUser email passwor

  • HTML5 服务器端事件：EventSource 与包装的 WebSocket

    HTML5 服务器发送事件 SSE API 是否只是 HTML5 WebSocket 之上的受限制的 基于事件的 API 在我看来 一个EventSource只是一个WebSocket that Cannot send data 使用tex

  • 在 asp.net vb 中通过第一个下拉列表值填充第二个下拉列表

    我在使用 asp net vb 时遇到了一些问题 我想做的是有2个下拉框 第一个下拉菜单将有 1 2 3 例如 第二个下拉菜单将有 A 乙 C 默认情况下 但是 如果选择 1 我希望第二个下拉菜单自动选择 c 我不知道 JavaScript

  • JavaScript 变量赋值与 OR 对比 if 检查[重复]

    这个问题在这里已经有答案了 在 JavaScript 中 我最近意识到你可以使用 OR 赋值的逻辑运算符 我想知道这是否被认为是不好的做法 特别是 我有一些具有可选数组输入的函数 如果输入是null or undefined我应该将它设置为

  • 具有行组的 JQuery 斑马条纹表

    我通常将斑马条纹表行设置为奇数 偶数 如下所示 效果很好 table tbody tr visible even this addClass even table tbody tr visible odd this addClass odd

  • 提交前验证表单（比检查空字段更复杂）

    我有一个包含时间输入的表单 具体来说 开放时间和结束时间 当按下提交按钮时 它会转到一个 php 页面 其中这些输入将添加到数据库中 在允许提交表单之前我想检查一些事情 例如 我想确保开始时间早于 小于 结束时间 这是表格 Opens

  • ReactJS：从没有 onChange 事件的 props 中选择默认值？

    所以 我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序 我有一个道具传递我想要选择的选项的默认值 如果我有的话 它就没有问题

  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function

  • 捕获 XSS（跨站脚本）攻击的最佳正则表达式（Java 中）？

    杰夫实际上在净化 HTML http refactormycode com codes 333 sanitize html 但他的示例是用 C 编写的 而我实际上对 Java 版本更感兴趣 有人有更好的 Java 版本吗 他的示例是否足以直

  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好

  • 将 JavaScript 引擎嵌入到 .NET 中 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 只是想知道是否有人尝试过将任何 js 引擎嵌入并实际集成到 net 环境中 我可以找到并实际使用 经过L

  • 如何在 angularjs 中修剪（）字符串？

    有角度特定的方法吗 如果没有 我应该使用内置的jquery 来做到这一点吗 如果我应该使用内置的jquery 如何在不使用 的情况下访问trim 函数 或者这是必要的 编辑 是的 我知道 str trim 对不起 我需要这个才能在 IE 8

  • 常规 JavaScript 可以与 jQuery 混合使用吗？

    例如 我可以采用这个脚本 来自 Mozilla 教程 https developer mozilla org en Canvas tutorial Basic usage

  • 如何在粘贴时获取文本区域输入字段的新值？

    我发现当我尝试从文本区域字段读取值时onpaste调用函数时 我得到字段的旧值 粘贴操作之前的值 而不是新值 粘贴操作之后的值 以下是此行为的演示 http jsfiddle net qsDnr http jsfiddle net qsDn

  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没

  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高

  • C# 中的 mshtml.HTMLDocumentClass

    在 C 中 我设法从 InternetExplorer 对象获取整个 HTMLDocumentClass 导航到某个 URL 然而 在 Visual Studio 2008 的调试模式下 该特定 URL 的 HTMLDocumentClas

  • FullCalendar 检查选择日是否有活动？

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c

  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • 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

热门标签