草庐IT

canvas-editor

全部标签

javascript - 检测在不可见和在视口(viewport)外时是否对canvas/css3动画进行了优化

我假设使用HTML5中的所有这些硬件加速动画,实际上不会渲染在视口(viewport)之外运行的动画。我希望能够检测到是否正在发生。我尝试在每秒移动100px的对象上循环使用webkitCSSMatrix来尝试确定每个刻度线移动了多少像素,但是如果我将动画移出视线则没有区别。有任何想法吗? 最佳答案 您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象之间的差异(计时器实际上并不能证明任何东西,但可以为您提供强大的indisium)。但是,了解Canvas的工作原理也可以为您提供坚实的指导。例如,Canvas是一个简单的

javascript - html2canvas - iframe 没有屏幕截图

我有一个任务需要在我的网页上加载URL(e.g.yahoo.com)并截取屏幕截图。我正在使用html2canvas截图并将其附加到页面正文。URL指定的页面已成功加载到div元素内的iframe中。但是当我尝试对其进行截图时,iframe区域变为空白。下面是previewURL和screenshot的代码。//topreviewtheURLcontentfunctionpreviewUrl(url,target){//usetimeoutcozmousehoverfiresseveraltimesclearTimeout(window.ht);window.ht=setTimeout

javascript - Ace Editor 上的按键事件

在这个神奇的编辑器(Ace:CodeEditor)上,有一种方法可以获取onchange事件,是否有onkeydown事件?或者我可以模拟它的hack? 最佳答案 没有keydown事件,可以在editor.textInput.getElement()返回的textarea上添加keydown事件监听器,但是更好的方法是使用editor.commands.addCommandeditor.commands.addCommand({name:"...",exec:function(){},bindKey:{mac:"cmd-f",wi

javascript - 修改Ajax.org Cloud9 Editor(Ace Editor)的装订线

我的网站上嵌入了一个Ace编辑器,我允许用户在其中输入内容。目前,内置函数自动显示插入的每一行的行号,如下所示:有没有办法让我手动设置gutter中的内容,然后再读取其中的值?例如:与其将其设置为1,2,3...,我希望它看起来像AabcBdef然后当我访问包含“abc”的行时,我想读取该行的装订线中的值“A”。更新:要为AceEditor自定义装订线,您必须覆盖“更新”功能:ace.require("ace/layer/my_gutter")//...define('ace/layer/my_gutter',['require','exports','ace/lib/dom'],fu

javascript - 随时间褪色的 Canvas 绘画 |奇怪的阿尔法分层行为

我正在绘制一个未被清除的Canvas,并使Canvas随着时间的推移逐渐变成纯色,或者在alpha中逐渐消失以显示后面的图层。我的第一直觉是简单地用每帧的低alpha在绘图上填充一个矩形,这样填充颜色就会逐渐累积并淡出绘图。但我发现了一些奇怪的行为(至少对我来说,我确信这是有原因的)。填充颜​​色永远不会完全累积。结果会根据油漆和填充颜色是否比彼此更亮/更暗而变化。我发现这个问题有人和我做同样的事情:fadeoutlinesafterdrawingcanvas?顶部的答案看起来不错,和我试过的一样。但它只适用于白底黑字。这是同一个fiddle的不同颜色的另一个版本,你会看到绘图永远不会

javascript - 在 Canvas HTML 上重绘大量对象

有没有一种快速有效的方法可以在canvas中移动大量对象?基本上,如果有大约1000个对象,并且我想一次移动所有对象以模拟滚动,则通过调用drawImage()1000多次来重绘每个对象会非常慢。有没有办法优化这个?我有一个问题的示例链接(而且只有100个对象):http://craftyjs.com/isometric/ 最佳答案 由于canvas不提供快速低级位图复制,因此很难在多个图层中执行操作,例如一次滚动整个背景然后只渲染边缘。那你能做什么?简而言之,什么都没有。尤其是在滚动时,当你有一个或多或少的静态背景时,你肯定可以用

javascript - 如何使用 HTML5 Canvas 而不是 Debug Draw 来绘制我的 Box2D 世界?

我非常了解HTML5Canvas,我了解使用循环等的基础知识和动画。我正在使用的演示:(单击以制作形状)http://henry.brown.name/experiments/box2d/example-canvas.html我不太熟悉的是Box2D。我正在使用Box2DWeb端口,听说它比Box2D-js更新,我不确定哪个最好。我知道如何初始化“世界”并且我可以在世界中放置对象。然后,我使用Step为世界设置动画-但是到目前为止,为了在屏幕上显示它,我只能使用debugdraw来让它工作,因为它基本上会为你做所有事情。我不想使用调试绘图,而是使用Canvas来绘制,例如一辆汽车,而不

javascript - canvas.toDataURL() 和 drawImage() 的安全错误

vardiv=document.getElementById("new");varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");varimg=newImage();img.src='http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';//img.src='local.png';img.onload=function(){//drawstheimageonthecanvas(works)ctx.drawImage(img,0,0

javascript - Ace Editor 获取当前光标行和列

我正在使用Ace编辑器。在Javascript(不是jQuery)中,我将如何返回当前光标行和列的位置? 最佳答案 editor.getCursorPosition()返回具有行和列属性的对象 关于javascript-AceEditor获取当前光标行和列,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/38181340/

javascript - 需要 Canvas 模糊工具

我有类似fabric.js的绘图应用程序(http://fabricjs.com/freedrawing/)我想嵌入像Photoshop这样的模糊工具(http://www.demowolf.com/tutorials/demo.php?id=1503&series=85&format=html)这是我的模糊功能,但当我尝试更改颜色时它无法正常工作,它出了问题你可以看到下面的屏幕截图......functionboxBlurCanvasRGBA(id,top_x,top_y,width,height,radius,iterations){if(isNaN(radius)||radius