首页 文章
  • 1 votes
     answers
     views

    HTML5画布流畅的文字动画动画不可能?

    我希望有一个平滑的动画,简单的针脚上有文字 . 这个引脚在画布周围缓慢移动,我需要流畅的动画 . 所以我的图钉由背景(填充和阴影圆圈)和顶部的文字组成 . 我为圆圈本身实现了非常平滑的运动,但 not for the text! 问:是否有可能在HTML5画布中实现流畅的文本移动以及如何实现? 我尝试了什么: Method 0 :只绘制圆圈,上面没有文字 . 动画很流畅 .Problem :没问题...
  • 1 votes
     answers
     views

    Angular 2 - 为第三方库提供用于渲染的元素

    我如何向Angular 2中的第三方库提供DOM元素? 例如,如果 Library 是假设的第三方库,我必须执行以下操作: var fakeId = document.getElementById('fake'); // e.g. canvas or SVG element var sirRender = Library.confiscate(fakeId); sirRender.drawMus...
  • 173 votes
     answers
     views

    如何从base64数据字符串保存PNG映像服务器端

    我正在使用Nihilogic的“Canvas2Image”JavaScript工具将画布图转换为PNG图像 . 我现在需要的是使用PHP将这个工具生成的base64字符串转换为服务器上的实际PNG文件 . 简而言之,我目前正在做的是使用Canvas2Image在客户端生成一个文件,然后检索base64编码的数据并使用AJAX将其发送到服务器: // Generate the image file ...
  • 6 votes
     answers
     views

    在HTML5 Canvas中分层的最佳方式?

    如果你需要在HTML5画布上的不同层上工作,最好的方法是什么?我看到有些人决定使用position:absolute将多个画布堆叠在一起 . 这是最好的方法吗?
  • 0 votes
     answers
     views

    画布图像与侧面检测碰撞

    我正在制作一个在线游戏,我使用HTML5画布和Javascript来构建我的游戏 .我有一些形状和一个移动的球,当碰撞形状时,形状应该消失 .形状和球是图像,我的大问题是如何检测球和形状之间的碰撞,因为我的形状是矩形,三角形,多边形和......例如: 这是我检测碰撞的代码,但它只适用于矩形: function collide(r1, r2) { var dx = (r1.x + r1.width...
  • 1 votes
     answers
     views

    如何让鼠标在画布上形状过度

    我有一个画布,用户可以通过在图像上绘制形状来选择图像上的东西 . 所以画布上可能有多个形状 现在我想要的是什么时候鼠标悬停形状我想改变画布的不透明度,除了自定义形状(鼠标悬停在哪里) . 这就像反向区域效果,一些jquery插件做http://davidlynch.org/projects/maphilight/docs/demo_simple.html(这里反向效果) 谢谢
  • 0 votes
     answers
     views

    如何改变自己的画布形状?

    我正在做一个项目,我使用createCapture(VIDEO);使用p5js库,使用我的网络摄像头获取视频 . 然后我存储该捕获的每个图像(来自<video>元素)并在函数draw()中的画布中绘制它 . 我想知道是否有可能改变画布的形状(例如镜子(椭圆形或圆形)) . 再次注意,我不想裁剪图像而是画布本身 . 这是一些代码: function setup(){ canvas...
  • 0 votes
     answers
     views

    html5画布对象碰撞和物理

    我正在制作一个简单的html5平台游戏,构建以前的游戏,但遇到了碰撞和物理问题 . 下面是关于地板及其如何处理碰撞的代码示例 . 完整的代码在这里 . http://www.ambitiongames.co.uk/dev/game.php游戏在这里http://www.ambitiongames.co.uk/dev/ 我遇到的问题是碰撞是基于事件的抓取,有时让玩家不在地板上 . 此外,由于跳跃和...
  • 1 votes
     answers
     views

    angular-img-cropper 无法使用方形图片在平方裁剪上设置裁剪尺寸工具

    我们正在使用https://github.com/AllanBishop/angular-img-cropper,到目前为止,它一直都很棒,但是今天我们偶然发现了一个 bug,当你加载像这样的平方图像时: 裁剪工具变得很小,几乎不可能使用,如果你点击黄色十字架,它会变得非常大。 我们刚刚在 dev 的 git 上发布了这个 bug https://github.com/AllanBishop...
  • 0 votes
     answers
     views

    CSS3 Speechbubble与图像

    嗨,我正试图通过Nicolas Gallagher http://nicolasgallagher.com/pure-css-speech-bubbles/demo/的例子在顶部制作一个响应式语音气泡 . 但是由于我已经将语音气泡中的压缩部分更改为气泡/文本框的左下角部分,因此在响应部分出现问题 . .pinched > :first-child:before { content: &qu...
  • 0 votes
     answers
     views

    为什么我的drawChar函数的drawImage没有显示?

    首先,我正在尝试使用HTML5画布和Javascript进行2D游戏的非常简单的平铺 Map 引擎,除了我的第二个drawChar函数的drawImage()没有在画布上显示外,一切似乎都正常 . 我知道网址很好,我已经检查过丢失的字符等,但是无法弄明白 . 代码如下 . 任何帮助表示赞赏 . 附:我知道这些代码中的大部分都不是“现代”或“最佳实践”,我仍在学习,我只是想了解为什么会出现这种错误 ...
  • 832 votes
     answers
     views

    如何清除画布以进行重绘

    在尝试复合操作和在画布上绘制图像后,我现在正在尝试删除图像和合成 . 我该怎么做呢? 我需要清除画布以重绘其他图像;这可以持续一段时间,所以我不认为每次都会画一个新的矩形是最有效的选择 .
  • 408 votes
     answers
     views

    HTML5 Canvas vs. SVG vs. div

    什么是动态创建元素并能够移动它们的最佳方法?例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们 . 我知道HTML5提供了三个可以实现此目标的元素:svg,canvas和div . 对于我想要做的,哪些元素将提供最佳性能? 为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容 . 第一页中的小部件将完全使用 canvas 元素创建,第二个完全...
  • 211 votes
     answers
     views

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

    我正在进行一个生成艺术项目,我希望允许用户从算法中保存生成的图像 . 一般的想法是: 使用生成算法在HTML5 Canvas上创建图像 图像完成后,允许用户将画布作为图像文件保存到服务器 允许用户下载图像或将其添加到使用算法生成的图片库中 . 但是,我坚持第二步 . 在得到Google的一些帮助后,我发现了这个blog post,这似乎正是我想要的: 这导致了JavaScript代...
  • 1 votes
     answers
     views

    javascript screen.width和screen.height无法按预期呈现

    尝试使元素呈现屏幕的完整大小: <!DOCTYPE html> <html> <head> <title>Test Page</title> </head> <body> <canvas></canvas> <script> (functi...
  • 1 votes
     answers
     views

    如何在html 5中的画布上自由绘制,它覆盖在视频上方?

    我有一个视频元素和画布元素 . 样式采用以下方式: canvas { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100%; width:100%; background-color: rgba(0,0,255,0.5); z-index:10; } video { pos...
  • 0 votes
     answers
     views

    ImageFromUrl的对象 - Javascript - FabricJS

    我正在为一个项目尝试http://fabricjs.com/ . 我成功创建了一个画布,并使用fabric.Image.fromURL函数加载了一些图像,但现在我需要用其他Fabric函数编辑这个图像,我的问题是这样的:我想在一个对象中转换图像,就像在Fabric中一样教程 var imgInstance = new fabric.Image(imgElement, { left: 100, ...
  • 0 votes
     answers
     views

    当包含base64数据作为href的HTML链接元素(<a/>)准备就绪时,是否触发事件?

    我创建了一个基本上并排显示2个图像的webpage . 它有一个&quot;download&quot;按钮,它触发一个vanilla Javascript函数,它创建一个 &lt;canvas&gt; HTML元素并连接其中的两个图像 . 然后它创建一个与base64编码的结果图像的链接为 href 并单击它: &lt;a download=&quot;image.png&quot; id=&...
  • 0 votes
     answers
     views

    联系表格7文字输入大小减少

    我正在使用联系表单7插件提交表单时,它会检查空字段并且需要打印两个字段的错误消息 . 在消息之后,用户被重定向到同一页面,但文本输入大小减少 . 我怎样才能保持相同的宽度?
  • 1 votes
     answers
     views

    如何知道mousedown事件是否出现在我们想要的画布上?

    这里我有一个与在画布上移动元素相关的代码示例 . 要将圆圈移动到画布上的其他位置,下面的代码将检查是否在圆形元素本身上触发了mousedown事件,以便可以使用mousemove启动进一步拖动 . 但我不明白用于了解鼠标是否在正确的圆上双击以拖动它的逻辑 . // start dragging function DragStart(e) { //coordinates of mouse ...
  • 4 votes
     answers
     views

    ChartJS 2.0 - 饼图上的蜷缩标签

    我需要绘制具有许多值(其中一部分是接近的)和长值标签的图表 . 值应显示在图表上(而不是图例) . 我正在使用以下插件来显示标签: var drawItemsValuesPlugin = { afterDraw: function(chartInstance) { var ctx = chartInstance.chart.ctx; // render ...
  • 0 votes
     answers
     views

    如何在AngularJS中显示占位符图像

    使用AngularJS,在特定视图中,我们使用图像的自然大小来驱动布局(使用最大高度,最大宽度,但让图像尽可能地扩展以适应该区域) . 我们还根据图像的预定高度和宽度以及主色信息,使用占位符数据uri作为图像 . 我们这样做的原因是因为使用画布图像为我们提供了相同的“自然”大小调整信息,我们不必为了调整大小而不断重新计算div的宽度和高度,同时保持宽高比等 . 因此,该指令首先使用Canvas创建...
  • 1 votes
     answers
     views

    在画布周围拖动图像

    我正在研究一个反应应用程序,它具有一些功能,允许用户在画布上拖动和图像并重新定位它,我已经移动功能,但它不是特别好,它似乎只是重绘了一个新的图像旧的顶部在图像反馈中的图像内给出图像 . 其次它似乎拖到图像的左上角而不是点击点我不知道我做错了什么 . 这是一个例子,https://j3mzp8yxwy.codesandbox.io/,我的反应代码如下, import React, { Compone...
  • 1 votes
     answers
     views

    无法在JavaScript中使用putImageData更新HTML5画布像素颜色

    这是我的完整代码: &lt;canvas width=&quot;1366&quot; height=&quot;768&quot;&gt;&lt;/canvas&gt; &lt;script&gt; var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var imageData =...
  • 0 votes
     answers
     views

    Javascript Canvas渲染方法在IE11中无效

    当我在除Internet Explorer 11之外的任何其他网络浏览器(最新版本的谷歌浏览器,Mozilla Firefox,Microsoft Edge和Opera)上运行此代码时,代码工作正常,但是当我在IE中运行它时,评论的行out得到“无法获取属性'[可变试图被声明]'未定义或空引用”错误 . 是否有一些修复我可以应用于此运行在IE中 . 我也在使用IE11的最新版本 . 这是我引用的代...
  • 0 votes
     answers
     views

    在paper.js上检测透明图像碰撞

    现在我正在尝试制作一个游戏,其中一个球从paper.js中的一些透明图像反弹 . 会发生什么是球在图像上但在透明部分,因此说它相交 . 现在我正在使用 circle.intersects(raster) paper.js是否可以检测球何时触及图像的不透明部分?
  • -1 votes
     answers
     views

    HTML5画布的形状编辑器

    我想知道是否有js canvas lib可以让你画出像https://leaflet.github.io/Leaflet.draw/docs/examples/full.html这样的形状 我已经探索过像Paperjs这样的几个库,但它仍然需要一些手工操作,比如可拖动点等 .
  • -1 votes
     answers
     views

    询问canvas函数中的问题

    为什么它不能正常运作?单击按钮时,块根本不移动 . 本来,网站可以正常运行,但是在改变了几次块的大小后,网站突然无法正常运行 . 有人会帮我解决问题吗?非常感谢! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; canvas{border:1px solid black;) &lt;/style&gt; &lt;scri...
  • 1 votes
     answers
     views

    使用fabric js设置svg背景在Adobe Illustrator中不起作用

    我使用数据uri将svg文件设置为画布的背景 . 我正在使用面料js . 当我将其导出为svg文件时,它在每个浏览器中都能正常工作 . 但是在Adobe Illustrator中打开svg文件并未显示背景 . 有没有解决方法呢? 下面是使用fabris.js' toSVG 功能生成的代码 . &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8...
  • 0 votes
     answers
     views

    使用2d上下文时,什么决定了HTML5画布上context.fillRect的原点?

    我在画布上使用带有多个bitmapSequence对象的easelJS库 . 我可能会问错误的问题,因为我不明白这是怎么回事 . 我会尽可能清楚地解释我的情况 . 我在画布上放置了多个bitmapSequence对象(精灵动画序列),并通过设置x和y属性在全局tick()函数中移动它们 . 一旦我设置了他们的x和y属性,我就调用stage.update(),它会重新渲染画布和所有bitmapSeq...

热门问题