html5-canvas相关内容

如何将 HTML5 Canvas 保存为服务器上的图像?

我正在从事一个生成艺术项目,我希望允许用户通过算法保存生成的图像.总体思路是: 使用生成算法在 HTML5 Canvas 上创建图像 当图像完成后,允许用户将画布作为图像文件保存到服务器 允许用户下载图像或将其添加到使用该算法制作的作品库中. 然而,我卡在了第二步.经过谷歌的一些帮助,我发现了这个 博文,这似乎正是我想要的: 这导致了 JavaScript 代码: func ..
发布时间:2021-11-26 22:28:07 前端开发

我们如何才能在旋转后的精确点停止这个 HTML5 Canvas 轮子?

在下面的代码链接中,HTML5 画布旋转轮游戏.我想在用户定义的位置停止这个画布,就好像用户想要总是在 200 个文本或 100 个这样的文本处停止. 目前,它在随机点停止,我想控制停止的位置,就像我想随时在 100 或 200 或 0 处停止圆圈一样. 我们怎样才能做到这一点???谁能帮忙!!!!!! 还附上了 Codepen 链接. HTML 文件 ..
发布时间:2021-11-26 13:57:55 前端开发

加载所有图像后如何提醒?

我正在构建一个 JavaScript 游戏,我想在加载所有图像后发出警报.我试过这段代码,但它不起作用: function loadEveryThing() {var imgNumber = 0;img1 = 新图片();img1.src = "1.png"img1.onload = 函数(){imgNumber = imgNumber + 1;}img2 = 新图片();img2.src = ..
发布时间:2021-11-26 13:52:47 前端开发

CanvasRenderingContext2D 中的透明度组

有没有一种方法可以将多个绘制操作组合到 2d 画布渲染上下文中,这样它们的组合结果就会组合到画布的先前内容上,而不是每个绘制操作自己编的? 一个应用:我想画一条带箭头的半透明线,我想避免线条和箭头重叠的区域增加不透明度. 许多其他渲染模型都支持此类功能.SVG 有一个 组不透明度 设置,在 14.5 节中进行了描述.PDF 参考 描述第 7.3 节中的“透明度小组".在许多图形应用程序 ..
发布时间:2021-11-26 13:51:27 其他开发

用于 HTML 画布的更快 Bresenham 线

慢渲染 我正在使用 Bresenham 的线条算法实时渲染像素艺术线条.它一次渲染 1 个像素 ctx.rect(x,y,1,1) 这是一个缓慢的操作.我不能使用像素缓冲区,这会大大减少渲染开销,因为我使用的是复合操作、alpha 和过滤器(其中一些会污染画布). 功能 function pixelArtLine(ctx, x1, y1, x2, y2) {x1 = Math.rou ..
发布时间:2021-11-26 13:29:56 前端开发

Canvas/WebGL 2D tilemap 网格工件

我正在创建一个简单的 2D 网页游戏,可以与您的典型瓷砖地图和精灵配合使用. 问题在于我想要平滑的相机控制,包括平移和缩放(缩放). 我尝试同时使用 Canvas 2D API 和 WebGL,在两者中我都无法避免网格线失真,同时还支持正确缩放. 如果重要的话,我所有的图块的大小都是 1,并缩放到任何需要的大小,它们的所有坐标都是整数,我使用的是纹理图集. 这是使用我的 W ..
发布时间:2021-11-26 13:27:59 其他开发

画布 3d 图

我做了一个 3d 图形来绘制其中的点.我已经绘制了 x、y 和 z 轴.您也可以通过按箭头键来旋转轴.现在我的问题是将轴标记为 x、y 和 z .我尝试使用填充文本在画布中添加文本.但是文本被添加到画布但不旋转.这是因为我猜我还没有为它设置旋转效果.那么我如何将旋转设置为文本,以便在轴旋转时文本也一起旋转.下面是我的代码. 画布表面旋转身体 {文本对 ..
发布时间:2021-11-25 04:20:27 C#

使用 HTML5 Canvas 进行图像处理和纹理映射?

在我正在使用的 3D 引擎中,我成功地以 3D 方式绘制了一个立方体.就我而言,填充侧面的唯一方法是使用纯色或渐变色.为了让事情更令人兴奋,我真的很喜欢使用简单的位图来实现纹理映射. 关键是我几乎找不到任何关于 JavaScript 图像处理主题的文章或代码示例.此外,HTML5 画布中的图像支持似乎仅限于裁剪. 如何拉伸位图以便矩形位图可以填充不规则的立方体面?在 2D 中,由于透视 ..
发布时间:2021-11-25 00:34:53 C#

我们如何才能在旋转后的精确点停止这个 HTML5 Canvas 轮子?

在下面的代码链接中,HTML5 画布旋转轮游戏.我想在用户定义的位置停止这个画布,就好像用户想要总是在 200 个文本或 100 个这样的文本处停止. 目前,它在随机点停止,我想控制停止的位置,就像我想随时在 100 或 200 或 0 处停止圆圈一样. 我们怎样才能做到这一点???谁能帮忙!!!!!! 还附上了 Codepen 链接. HTML 文件 ..
发布时间:2021-11-24 22:44:32 C#

加载所有图像后如何提醒?

我正在构建一个 JavaScript 游戏,我想在加载所有图像后发出警报.我试过这段代码,但它不起作用: function loadEveryThing() {var imgNumber = 0;img1 = 新图片();img1.src = "1.png"img1.onload = 函数(){imgNumber = imgNumber + 1;}img2 = 新图片();img2.src = ..
发布时间:2021-11-24 22:39:32 C#

垂直或水平翻转一组点作为围绕其中心的形状

我有一个 Web 应用程序,它接收一些点数组,我需要在画布上绘制它们.不幸的是,我得到的数据集不是我想要的.我需要将形状旋转 180 度.考虑下图: 最初我得到绿色矩形的点.示例点: (1,1), (3,1), (2, 3) 出现在数据集中的点的顺序可能会有所不同......最后是path绘制形状. 现在我需要围绕它的中心垂直翻转它以结束红色三角形.坐标将为: (3, ..
发布时间:2021-11-24 22:28:38 C#

如何正确地从每一侧(顶部、左侧、底部、右侧)创建 2d 对象碰撞

只是为不想阅读一大堆文字的人添加此内容,至少阅读此内容并查看图片以了解我的问题; 我在“玩家"和“物体"之间设置了碰撞,这样当“玩家"碰到“物体"的“左边"时,“玩家"就会被放到“物体"的“左边".(这就是我要的).但我希望玩家能够击中物体的任何一侧(“顶部"、“左侧"、“右侧"、“底部")并适当放置.所以看上面的图片,基本上我试图在黑色方块和其他物体之间创建碰撞.黑色方块是“玩家"对象,灰色方 ..
发布时间:2021-11-24 22:08:09 C#

用于 HTML 画布的更快 Bresenham 线

慢渲染 我正在使用 Bresenham 的线条算法实时渲染像素艺术线条.它一次渲染 1 个像素 ctx.rect(x,y,1,1) 这是一个缓慢的操作.我不能使用像素缓冲区,这会大大减少渲染开销,因为我使用的是复合操作、alpha 和过滤器(其中一些会污染画布). 功能 function pixelArtLine(ctx, x1, y1, x2, y2) {x1 = Math.rou ..
发布时间:2021-11-24 21:19:43 C#

Canvas/WebGL 2D tilemap 网格工件

我正在创建一个简单的 2D 网页游戏,可以与您的典型瓷砖地图和精灵配合使用. 问题在于我想要平滑的相机控制,包括平移和缩放(缩放). 我尝试同时使用 Canvas 2D API 和 WebGL,在两者中我都无法避免出血的网格线伪影,同时还支持正确缩放. 如果重要的话,我所有的图块的大小都是 1,并缩放到任何需要的大小,它们的所有坐标都是整数,我使用的是纹理图集. 这是使用我 ..
发布时间:2021-11-24 21:17:46 C#

如何在 JavaScript 中释放内存

我正在使用画布及其包含大量数据(数百万个整数)的 ImageData 对象.因此,使用几个数组已经需要大量内存(高达 300MB).有没有办法在不需要时释放某些数组的内存?我正在尝试将 undefined 分配给该变量.是吗? 解决方案 如果变量持续存在(例如,它是全局的或某些持续数据结构的一部分)并且它指向的数据很大,并且您希望该数据符合条件垃圾收集,那么您为该变量分配一些小的东西是正确 ..
发布时间:2021-11-18 02:24:11 其他开发

在鼠标移动上创建涂抹/液化效果,使用 webgl 连续动画恢复到原始状态

我正在尝试寻找信息或示例,我可以使用这些信息或示例来创建连续动画恢复到原始状态的涂抹/液化效果. 最初我正在考虑使用three.js或pixi.js来渲染一些文本,然后使用鼠标事件和光线投射将网格拖出位置,我发现的最接近的就是这个. https://codepen.io/shshaw/pen/qqVgbg 让渲染器 = PIXI.autoDetectRenderer(window.i ..
发布时间:2021-11-10 05:55:14 其他开发

动画“摇晃的画布"就像在 Discord 的登录页面中一样?

作为参考,我指的是 Discord 的登录页面左上角的深灰色空间.对于无法访问该链接的任何人,以下是屏幕截图: 它有许多非常酷的效果,点和(较暗的阴影)随着鼠标移动,但我对“摇摆边缘"效果更感兴趣,在较小程度上对“快速摇摆/在页面加载时缩放"(加载时在画布中缩放会产生类似的,如果不是“更便宜"的效果). 不幸的是,我不能以 MCVE 的方式制作太多东西,因为我不确定从哪里开始.我尝试挖 ..
发布时间:2021-11-10 05:51:05 其他开发

在画布中围绕其中心旋转图像

我正在尝试在画布上制作我的第一个图像动画.我希望图像旋转,但我的代码中有些地方不正确.有任何想法吗?这一切都在准备好的 jquery 文档中: var canvas = document.getElementById('logobg1');var ctx = canvas.getContext('2d');var img = new Image();//创建新的图像对象img.src = '图片 ..
发布时间:2021-11-10 05:47:47 其他开发

HTML5 Canvas - 如何在图像背景上画一条线?

我正在尝试在图像背景之上绘制一条线 - 在 HTML5 Canvas 中.然而,线条总是在图像后面绘制.实际上,首先绘制线条,然后绘制图片 - 无论我如何调用函数. 如何将线条带到图像的顶部? var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");context.clea ..
发布时间:2021-11-10 05:44:51 其他开发

为什么 requestAnimationFrame 比 setInterval 或 setTimeout 更好

为什么我应该使用 requestAnimationFrame 而不是 setTimeout 或 setInterval? 这个自我回答的问题是一个文档示例. 解决方案 高质量动画. 这个问题最简单的回答就是.requestAnimationFrame 产生更高质量的动画,完全消除使用 setTimeout 或 setInterval 时可能发生的闪烁和剪切,并减少或完全消除跳帧 ..
发布时间:2021-11-10 05:26:10 其他开发