草庐IT

Canvas-EventSystem-Panel

全部标签

javascript - HTML to canvas 的性能问题,从哪里开始?

我一直在做一个实验,通过让javascript从加载的DOM中读取所有必要的信息,将HTML渲染成Canvas图像。由于canvas缺少CSS的许多标准部分,尤其是在文本格式化方面,因此需要完成大量工作和性能密集型过程(letter-spacing就是其中之一)。我们的意图是并且永远不会是制作一个万无一失的HTML渲染器,因为它根本不可能,而是尝试尽可能准确。对于示例页面,谷歌浏览器加载它们的速度通常比FF快得多。但是,对于某些页面(通常是较大的页面),Chrome完全卡住,而Firefox可以正常加载它们。现在,我一直在尝试查明到底哪里出了问题,但运气不佳,因为它最终没有在Chrom

javascript - HTML to canvas 的性能问题,从哪里开始?

我一直在做一个实验,通过让javascript从加载的DOM中读取所有必要的信息,将HTML渲染成Canvas图像。由于canvas缺少CSS的许多标准部分,尤其是在文本格式化方面,因此需要完成大量工作和性能密集型过程(letter-spacing就是其中之一)。我们的意图是并且永远不会是制作一个万无一失的HTML渲染器,因为它根本不可能,而是尝试尽可能准确。对于示例页面,谷歌浏览器加载它们的速度通常比FF快得多。但是,对于某些页面(通常是较大的页面),Chrome完全卡住,而Firefox可以正常加载它们。现在,我一直在尝试查明到底哪里出了问题,但运气不佳,因为它最终没有在Chrom

html - 允许用户在 HTML5 Canvas 游戏中键入文本

我正在尝试结合使用Canvas和优秀的KineticJS库来编写我的第一个HTML5游戏,但我在早期遇到了一些障碍。我想做的是让用户在游戏的框中输入他们的名字。做了一些研究后,除了在我正在使用的那部分Canvas上获取floatHTML元素之外,我看不到任何其他方法。这是正确的吗?在很多Flash和网页游戏中长大,我确信每次我必须输入名称或保存文件名时,它都是直接在游戏本身中完成的,而不依赖于HTML生成是吗?如有任何关于如何执行此操作的建议,我们将不胜感激。 最佳答案 您可以使用以下CSS技术在Canvas顶部获得一个float的

html - 允许用户在 HTML5 Canvas 游戏中键入文本

我正在尝试结合使用Canvas和优秀的KineticJS库来编写我的第一个HTML5游戏,但我在早期遇到了一些障碍。我想做的是让用户在游戏的框中输入他们的名字。做了一些研究后,除了在我正在使用的那部分Canvas上获取floatHTML元素之外,我看不到任何其他方法。这是正确的吗?在很多Flash和网页游戏中长大,我确信每次我必须输入名称或保存文件名时,它都是直接在游戏本身中完成的,而不依赖于HTML生成是吗?如有任何关于如何执行此操作的建议,我们将不胜感激。 最佳答案 您可以使用以下CSS技术在Canvas顶部获得一个float的

javascript - Html5 Canvas 限制

我一直未能找到详细说明有关Html5Canvas元素的限制的文档,例如它可以加载的最大图像文件大小是多少等。我问的原因是我一直在尝试调整图像大小,范围从通过ctx.scale()从50kb到2.0mb,但它一直非常不一致,因为对于同一图像,有时ctx.drawImage()会成功,而有时会失败(不成功的是没有重新缩放的图像出现在Canvas中)。我还放置了console.log(base64)来监视varbase64=canvas.toDataURL()的结果,并且注意到当成功调整大小后,调整大小的base64将是预期的相当长的字符串,当调整大小时不成功时,字符串仍然会出现但相对较短并

javascript - Html5 Canvas 限制

我一直未能找到详细说明有关Html5Canvas元素的限制的文档,例如它可以加载的最大图像文件大小是多少等。我问的原因是我一直在尝试调整图像大小,范围从通过ctx.scale()从50kb到2.0mb,但它一直非常不一致,因为对于同一图像,有时ctx.drawImage()会成功,而有时会失败(不成功的是没有重新缩放的图像出现在Canvas中)。我还放置了console.log(base64)来监视varbase64=canvas.toDataURL()的结果,并且注意到当成功调整大小后,调整大小的base64将是预期的相当长的字符串,当调整大小时不成功时,字符串仍然会出现但相对较短并

javascript - 鼠标在 Canvas 上的位置

下面的代码绘制正确,但绘制到错误的坐标。它应该绘制鼠标所在的位置。我无法发现我的错误。谢谢。JSFIDDLEcontainer.mousedown(function(e){varparentOffset=$(this).offset();varx=e.pageX-parentOffset.left;vary=e.pageY-parentOffset.top;context_temp.beginPath();context_temp.moveTo(x,y);started=true;});container.mousemove(function(e){varparentOffset=$(

javascript - 鼠标在 Canvas 上的位置

下面的代码绘制正确,但绘制到错误的坐标。它应该绘制鼠标所在的位置。我无法发现我的错误。谢谢。JSFIDDLEcontainer.mousedown(function(e){varparentOffset=$(this).offset();varx=e.pageX-parentOffset.left;vary=e.pageY-parentOffset.top;context_temp.beginPath();context_temp.moveTo(x,y);started=true;});container.mousemove(function(e){varparentOffset=$(

html - 如何在浏览器中跨多个页面宽度打印大 Canvas ?

我的应用程序需要打印出可以跨越多个页面宽度和高度宽度的任意大Canvas。前段时间有一个类似的问题whereitwasclaimedthebrowserwon'tprinttomultiplepagewidths.因为这是一段时间前的事了,我想知道它是否仍然是真的。另外,有什么策略可以在不拆分的情况下打印出大Canvas?varcanvas=document.getElementById("canvas1");functiondraw_a(){varcontext=canvas.getContext("2d");////LEVER//planecontext.fillStyle='#a

html - 如何在浏览器中跨多个页面宽度打印大 Canvas ?

我的应用程序需要打印出可以跨越多个页面宽度和高度宽度的任意大Canvas。前段时间有一个类似的问题whereitwasclaimedthebrowserwon'tprinttomultiplepagewidths.因为这是一段时间前的事了,我想知道它是否仍然是真的。另外,有什么策略可以在不拆分的情况下打印出大Canvas?varcanvas=document.getElementById("canvas1");functiondraw_a(){varcontext=canvas.getContext("2d");////LEVER//planecontext.fillStyle='#a