html5-canvas相关内容

如何检查两个绘图(线)是否在 Canvas 中碰撞?

所以我一直在开发一款奔跑的火柴人游戏.不幸的是，我遇到了一个我似乎无法弄清楚的问题.如果名为障碍物的绘图穿过我的火柴人，我希望出现警报并说“游戏结束".但是，如果我的火柴人踢了(他变成了红色)并且障碍物右脚碰到了图纸，那么它会说“你赢了".任何帮助将不胜感激！ 以下是我到目前为止的内容:顺便说一句，我考虑检查障碍物通过的给定像素是否为红色，然后说“你赢了"，但这似乎不起作用. $(docu ..

发布时间：2022-01-17 12:09:12 javascript canvas html5-canvas 前端开发

HTML Canvas 渐变只显示一种颜色

我在使用 Canvas gradient 时遇到问题，它只显示我在 gradient.__addColorStop__(offset,color) 方法上设置的最后一种颜色. 例如，这是我更好理解的一段代码: 让 canvas = document.getElementById('canvas');让 ctx = canvas.getContext('2d');让梯度 = ctx.crea ..

发布时间：2022-01-17 12:08:56 javascript html5-canvas linear-gradients 前端开发

如何检查鼠标单击是否在 JavaScript 中 HTML5 Canvas 上的旋转文本内?

我在画布上以 X、Y 坐标绘制了一个文本并保存了它们.我有一个简单的方法来检查是否在文本边界内发生了鼠标单击.问题是当我将文本旋转 45 度时，我无法检查旋转后的文本中是否发生了鼠标点击. 简而言之，如何检查鼠标点击是否在旋转的文本或形状内? 解决方案 创建一个与文本同角度旋转的矩形对象，但不绘制. 然后使用: //在此处设置转换.//添加表示文本区域的矩形:ctx.begi ..

发布时间：2022-01-17 12:08:35 javascript html canvas html5-canvas 前端开发

我如何“写作"上下文画布中的图标?

这是我的字体: @font-face {font-family: "myicon";/*...*/} 我的图标在 css 中的内容是: content: "\e000"; 我的 Js 代码: ctx.font = '13.5pt myicon';ctx.fillText("\ue000",90, 101);//不工作 你能解释一下问题出在哪里吗?为什么不打印图标?(对不起我的英语不 ..

发布时间：2022-01-17 12:08:24 javascript css html canvas html5-canvas 前端开发

在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

目标:通过 Fabric.js 或通过 Javascript 保持原始对象的纵横比相同，但又不超过父对象的宽度/高度比例? 父对象(矩形或组)不会以 canvas 元素为中心. 这是我到目前为止的代码:https://stackblitz.com/edit/angular-my8hky 我的 app.component.ts 到目前为止: canvas: fabric.Canv ..

发布时间：2022-01-17 12:08:14 javascript angular canvas html5-canvas fabricjs 前端开发

防止画布对象发生碰撞或相交

我正在画布上绘制 n 个矩形.矩形是可拖动和可缩放的.我想防止它们重叠或相交.最好的情况是，如果它们只是相互对齐. 我想办法检查十字路口.在我的示例中，我将触摸对象的不透明度设置为 0.1. 巧合的是，在我尝试解决此问题时，我的对象在接触另一个对象时无法释放.请参阅 http://jsfiddle.net/gcollect/jZw7P/这是因为第 91 行没有执行警报.alert(ma ..

发布时间：2022-01-17 12:08:05 canvas html5-canvas collision-detection intersection fabricjs 其他开发

KineticJS 撤消图层:撤消时图层不会消失?

我在 Canvas HTML5 中的设计器绘图工具上有一个特定问题.我正在开发一个动作历史系统(撤消和重做).我正在根据 projeqht 对 的回答构建我的系统这个问题 序列化历史数组中的层.核心，解决方案的想法是有效的，但我有一个奇怪的问题.当我点击撤消时，它会创建新图层，但旧图层并没有消失.我会附上我的源代码，我也会附上屏幕截图，这样你就可以看到发生了什么: 源码: var hist ..

发布时间：2022-01-17 12:07:54 javascript html html5-canvas kineticjs 前端开发

在javascript数组中分散数字

我有一个 10+ 个数字的数组.它们代表圆上的坐标 - 以度为单位，即每个数字在 0 和 359.999999... 之间 我要解决的问题是，当我在圆圈上绘制项目时(通过 html5 canvas api)，有时它们会聚集在一起，导致项目相互绘制. 所以我想创建一个算法，将项目均匀地分布在它们的初始集群位置周围.假设(我希望这是一个可配置的选项)两个项目之间的最小距离是 5 度. ..

发布时间：2022-01-17 12:07:45 javascript arrays algorithm sorting html5-canvas 前端开发

HTML 5 Canvas 似乎重绘了删除的部分

我在 jsfiddle 上创建了以下代码.目标是在单击后从画布中删除一个框.实际发生的是网格被清除并完全重新绘制，并在其旧位置删除了框.只有当所有给定的对象都被删除时，网格才会显示为空......我很困惑！我做错了什么? jQuery(函数(){GridBox = 新的 GridBox();GridBox.init();var canvas = GridBox.canvas;canvas.on( ..

发布时间：2022-01-17 12:07:29 javascript jquery canvas html5-canvas 前端开发

使用 fabric.loadSVGFromString 扭曲的结果

我用inkscape编辑了一个SVG: ..

发布时间：2022-01-17 12:07:20 javascript html5-canvas fabricjs 前端开发

将 HTML 画布转换为二进制图像数据

我需要有关 HTML 画布元素的帮助.我是 HTML 新手. 我需要从网络摄像头捕获图像并将其发送到 Microsoft 认知 API 以查找图片中的情绪. API 接受八位字节流中的图像.API 是 https://westus.dev.cognitive.microsoft.com/docs/services/5639d931ca73072154c1ce89/operations/ ..

发布时间：2022-01-17 12:07:03 javascript html5-canvas 前端开发

围绕轴问题旋转画布

我正在使用 canvas 3d 绘制一个 3d 图形，我可以在其中绘制 (1,5,4)、(-8,6,-2) 等点.所以我能够绘制所有正面和负 x、y 和 z 轴.我也使用箭头键有旋转效果.旋转说明:z 轴从屏幕中心向外延伸. 要绕 x 轴旋转，请按向上/向下箭头键.要绕 y 轴旋转，请按左/右箭头键.要绕 z 轴旋转，请按 ctrl+left/ctrl+down 箭头键. 我可以通过在 ..

发布时间：2022-01-17 12:06:53 javascript html canvas graph html5-canvas 前端开发

来自跨启用站点的跨域图像加载被拒绝

我正在尝试使用启用 CORS 的图像，该图像位于启用 cors 的站点:dropbox.com. 我遇到了一个错误:CORS 政策拒绝跨域图像加载. 如何解决? var img = new Image();img.crossOrigin = "匿名";var canvas = document.createEleme ..

发布时间：2022-01-17 12:06:46 javascript image html5-canvas dropbox cors 前端开发

清除后绘制图像时出现画布“形状伪影"

我的 Web 应用程序中有一个非常令人费解的画布工件/错误.清除画布后，在画布上绘制另一个图像时，先前已清除的圆形会重新出现，但只会出现一次.图像已像这样初始化一次: this.image = new Image();this.image.src = imageroot + image + '.png'; 在调试器中，我在每次绘制图像时都会中断，以发现此形状伪影仅在我第一次绘制此图像时出现. ..

发布时间：2022-01-17 12:06:20 canvas html5-canvas 其他开发

KineticJS 拖动一个连接线的框

我以前在网上看到过这样的例子，但我再也找不到链接了. 基本上它是一个可拖动框的 KineticJS 示例，并带有线连接到它.当您围绕线移动框时，将保持连接并重新绘制到框的位置. 我真的很想知道是否有其他人看过这个例子，或者如何做到这一点.我用谷歌搜索了这个例子，但我在任何地方都找不到答案. 谢谢. 解决方案 做起来并不难... 创建你的盒子: var box = ..

发布时间：2022-01-17 12:06:12 javascript html html5-canvas kineticjs 前端开发

webkit css resize 不适用于儿童画布?

假设下面的 html 和 css 代码片段: #outer {宽度:100px；高度:100px；溢出:隐藏；调整大小:两者；边框:1px纯黑色；}#内在{宽度:100%；高度:100%；} 我希望 div 可以调整大小，而在 Firefox 中，确实如此.然而，在基于 webkit 的 ..

发布时间：2022-01-17 12:06:03 html css html5-canvas webkit 前端开发

如何保护 HTML5/Canvas 游戏中的代码?

在流行的 HTML5/Canvas 游戏中，游戏制造商如何通过在网络浏览器中右键单击页面来防止访问者看到游戏代码?是否所有的游戏代码都在服务器上，而只有一小部分游戏代码在浏览器中，然后服务器和浏览器之间通过 Ajax、Websockets 或其他方式进行某种通信? 我很好奇，想了解更多?我正在使用 Canvas 学习 HTML5 游戏开发，我不想分享我花了这么多时间开发的所有代码.我该如何保 ..

发布时间：2022-01-17 12:05:53 html canvas html5-canvas 前端开发

如何在 HTML5 中提高游戏中许多对象的性能?

当需要显示许多对象并计算位置、碰撞检测、反应等并且我希望一切看起来顺利时，我可以做什么?这是我正在开发的 示例.我希望如果屏幕上有 100 个球，我可以流畅地显示它们.但我不知道该怎么做.我们将不胜感激每一个建议. 解决方案 在这个 HTML5 Rock 的 画布性能教程. 而且，如果您可以在没有 Box2D 的情况下自由处理碰撞检测，请查看此 四叉树实现.四叉树不直接处理冲突，但可 ..

发布时间：2022-01-17 12:05:44 performance html5-canvas 其他开发

为什么我的游戏角色在不同的电脑上速度不同?

我正在使用 Java Script 开发在线游戏.我正在使用 setInterval (movimage, 10) 方法来移动游戏角色.但是我看到游戏角色的移动速度是不一样的都是电脑.请给我建议. 解决方案 你可能应该使用 requestAnimationFrame (https://developer.mozilla.org/en-US/docs/DOM/window.requestAn ..

发布时间：2022-01-17 12:05:35 javascript animation html5-canvas 前端开发

仅转换 Path2D 的样式

在 canvas 2D API 中，我们可以首先使用一个上下文的转换定义一个子路径，然后只为 fill() 或 stroke() 调用更改该上下文的转换，这会对 stylings 产生影响，例如 fillStyle、lineWidth 和其他可见属性，但会保留已定义的子路径.当我们想要在保持相同笔划宽度的同时放大矢量形状时，这非常方便. 这是一个简单的例子，其中只有 lineWidth 受变 ..

发布时间：2022-01-17 12:05:29 javascript html5-canvas transformation path-2d 前端开发