草庐IT

canvas2d

全部标签

javascript - 单击 Canvas 中 Sprite 上的区域

我正在用Javascript创建游戏。目前,Sprite是带有背景图像的div元素,更新后可以创建动画。我听说如果我制作元素Canvas并将Spriteblit到Canvas上,我可以使Sprite可点击,省略透明区域。我需要一个可以点击我的游戏Sprite但可点击区域适合Sprite形状的解决方案。它还需要是自动的。我无法使用预制的点击map执行此操作。 最佳答案 我有一个教程几乎完全可以满足您的HitTest需求。查看代码here.当您单击时,代码将每个形状(我使用矩形,但它与半透明图像一起工作时效果很好)绘制到内存中的Canv

javascript - Canvas 已通过本地 chrome ://extension URL 被跨源数据污染

我正在开发googlechrome扩展程序,我正在尝试将与扩展程序捆绑在一起的图像加载到Canvas中。varcanvas=document.createElement('canvas');canvas.width=470;canvas.height=470;varcontext=canvas.getContext('2d');varimage=newImage();image.addEventListener('load',function(){//process});image.src=chrome.extension.getURL("asset/gotcha.png");当我在内

javascript - 如何正确调整 Facebook Canvas 应用程序 (iFrame) 的大小?

我需要在更新页面内容后调整Canvas大小。我可以明确地做到这一点FB.Canvas.setSize({width:760,height:1480});然而,它在没有参数的情况下无法工作,即.setSize()。此外,我可以通过以下方式调整高度FB.Canvas.setAutoResize(true);但只会增加-当内容减少时它不会减少高度。以下行不起作用:FB.Arbiter.inform("setSize",FB.Canvas._computeContentSize());FB.Canvas.setSize(FB.Canvas._computeContentSize());如何让它

javascript - ImageUtils.loadTexture 与 Canvas 渲染器中的回调

我正在使用three.js修订版53在CanvasRenderer(Win7上的IE)中加载纹理并为onLoad事件添加回调时,纹理未显示。当我删除回调函数时,纹理会按预期显示://添加回调不工作varmaterial=newTHREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('text_build.png',{},function(){//dosomething})});varplane=newTHREE.Mesh(newTHREE.PlaneGeometry(135,135),material);plane.overd

javascript - 如何检查 Canvas 框架

我刚看到这个link,关于如何在Chrome开发工具上检查“Canvas框架”,但如何在Chrome扩展程序上检查?我认为这里应该使用chrome.debugger.sendCommand方法。如何在Chrome扩展上做到这一点?编辑:我通常想使用Chrome的调试器或一些类似的方法检查这些数据,而不与JavaScript的代码交互。 最佳答案 实验性的Canvas检查功能已从Chrome44(crbug.com/475808)中删除。它是通过捕获对页面中Canvas方法的调用来实现的。我之前使用此Canvas检查功能为创建简化的测

javascript - (js/jquery) 在没有 Canvas 的情况下在 FF/Saf/Chrome 中旋转图像或缩放 Canvas 项目

我正在做一个项目,我需要根据用户的喜好旋转和成像,然后允许他们稍微放大和缩小。在IE中使用jquery.rotate.1-1.js一切都完美(多么罕见),因为MS编写了自己的旋转工具(progid:DXImageTransform),因此img被旋转,然后作为图像保存。但是看看JS,我发现如果浏览器不是IE,那么会渲染一个Canvas(我从来没有真正使用过Canvas),这意味着一旦绘制了旋转图像的Canvas,我就无法放大图像,因为如果我正确理解Canvas实际上并不包含信息。我也尝试过使用我的非IE浏览器进行CSS3转换,并让所有内容正确旋转,但是当我尝试缩放时,它使用的是现在不存

javascript - 如何平移 Canvas ?

我的代码中有这些事件监听器canvas.addEventListener('mousemove',onMouseMove,false);canvas.addEventListener('mousedown',onMouseDown,false);canvas.addEventListener('mouseup',onMouseUp,false);这些功能将帮助我平移Canvas。我在onLoad中声明了一个名为pan、isDown、mousePostion和先前鼠标位置的变量。然后在初始化函数中将pan、mousePos和premousepos设置为包含0,0的向量functiondr

javascript - 将 d3.js Canvas 附加到 div

我正在尝试向图表添加图例,并且我想将其附加到我的图表div。现在我正在使用以下代码,它将图例附加到“正文”。我想改为将它附加到我的“图表”div,以便我可以在我的图例之后创建一个页脚。现在首先处理HTML页面,然后运行我的d3javascript文件,因此图例被放置在我的页脚下方。提前谢谢你。//Createthesvgdrawingcanvas...varcanvas=d3.select("body").append("svg:svg").attr("width",300)//canvasWidth).attr("height",300);//canvasHeight);

<canvas> 上的 JavaScript 文本识别和 OCR

关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭5年前。Improvethisquestion我找到了一个识别手写数学方程式的网络应用程序:http://webdemo.visionobjects.com/equation.html?locale=default我想知道是否有人知道实现此机制的应用程序或教程或开源项目,因为从这个webapp获取它真的很复杂。注意:我只需要在Canvas中绘制的等式在输入文本框中进行翻译即可。

javascript - Canvas 库处理 SVG 的方式和 SVG 库处理 SVG 的方式有什么区别?

我对探索浏览器中的图形用户界面非常感兴趣。我真的很喜欢.SVG文件,原因有很多,主要是它们具有可扩展性,并且可以在Illustrator等程序中轻松制作。我喜欢的另一件事是,在许多库(例如Snap.svg)中,可以选择各个图层(例如更复杂形状的圆形路径)。但是,我也经常使用粒子,并且有很多对象要绘制。因为我做的事情对音乐有反应,所以我需要绝对最快的库(以保持许多对象的高FPS计数)。在查看了webGL和SVG以及canvas之后,我发现webGL显然是绘制诸如图片之类的东西最快的,但是我没有看到能够使用webGL并访问与原生svg库具有的相同路径信息的库.有人可以向我解释一下“原生”s