草庐IT

video-canvas-magic

全部标签

javascript - 缩放jqplot后获取 Canvas 中的数据点列表

如果有人能帮我解决这个问题,我将不胜感激。我们正在使用Jqplot绘制一些统计数据和缩放功能。具体来说我们要用到中的例子http://www.jqplot.com/deploy/dist/examples/zoom1.html和http://www.jqplot.com/deploy/dist/examples/zoomOptions.html我们需要做的一件事是重新计算我们在页面上显示的一些值,例如放大后图表中可见点的标准偏差、平均值等。为此,我们需要获取放大后图表上存在(保留)的数据点列表。因此理想情况下,我们正在寻找一种返回放大后图表中可见当前数据集。我查了API文档,好像没有这

javascript - 三个JS : Text Sprite's font size difference between WebGL renderer and Canvas renderer

我正在使用三个JS来开发3d图形。我想将图表的单位显示为THREE.SPRITE。为了创建SPRITE,我首先创建了一个Canvas元素并向其中添加了文本。然后我用之前创建的Canvas元素创建了THREE.Texture。使用纹理作为贴图创建THREE.SpriteMaterial,然后使用此SpriteMaterial创建THREE.SPRITE。将此SpriteMaterial添加到场景中。当渲染器是THREE.WebGLRenderer的实例时,文本的大小非常小,而当渲染器是THREE.CanvasRenderer的实例时,文本的大小非常大.以下是我用来创建Sprite的代码。

javascript - 在 HTML5 Canvas 上绘制 1 像素线的完整解决方案

在HTML5Canvas上绘制1像素线总是有问题。(引用http://jsbin.com/voqubexu/1/edit?js,output)绘制垂直/水平线的方法是x+0.5,y+0.5(引用Canvaslinebehaviourwhen0)。要在全局范围内执行此操作,ctx.translate(0.5,0.5);是个好主意。但是,当涉及到对Angular线时,这种方法就不起作用了。它总是给出一条2像素的线。有没有办法阻止这种浏览器行为?如果没有,是否有可以解决此问题的软件包? 最佳答案 您提到的“更宽”的线是由浏览器自动完成的抗

javascript - canvas getImageData 方法是否依赖于机器/浏览器?

一位客户需要有关提取产品图片主色的程序的帮助。我能够用Javascript快速实现它;下面的算法仅对图像上3x3网格的中心方block进行采样,以快速估计图像中的T恤颜色。varimage=newImage();image.onload=function(){try{//getdominantcolorbysamplingthecentralsquareofa3x3gridonimagevardominantColor=getDominantColor();//outputcolor$("#output").html(dominantColor);}catch(e){$("#outpu

javascript - 使用 Protractor 测试 Canvas 绘图

有没有办法测试绘图是否是使用Protractor在Canvas上绘制的?即我根据用户点击绘制了一个矩形:varshape=newcreatejs.Shape();shape.graphics.beginStroke("black");shape.graphics.drawRect(crd.x,crd.y,crd.width,crd.height);stage.addChild(shape)stage.update()现在我想制定一个规范来测试是否在指定坐标上绘制了一个矩形,并且作为一个加号,测试它的边框是否为黑色。这可以使用Protractor/WebDriverJSAPI吗?

javascript - 如何通过 javascript 将图像/HTML Canvas 切成两半?

我正在使用html2canvas将具有自定义功能的googlemapjavascriptAPI转换为Canvas,然后转换为图像。在所有浏览器上都能正常工作,除了在IE11上它会生成一个图像,图像右侧有额外的空白,等于(浏览器窗口的宽度-map宽度)。所以我的窗口越宽,右边的空间就越大,反之亦然。我怎样才能在实际图像(768像素宽)的边缘切分该图像(或HTMLcanvas)?我在这里找到了这段代码,但不知道如何为这个任务修改它:varimage=newImage();image.onload=cutImageUp;image.src='myimage.png';functioncutI

javascript + html5 Canvas : drawing instead of dragging/scrolling on mobile devices?

我正在使用html5Canvas+一些javascript(onmousedown/move/up)在网页上创建简单的绘图板。在Opera、Firefox、Chrome等中运行良好(在台式电脑上试用)。但是,如果我使用iPhone访问此页面,当我尝试在Canvas上绘图时,它会拖动或滚动页面。这适用于其他页面内容,通过上下滑动页面,您可以像往常一样在移动浏览器中浏览页面。但是有没有一种方法可以在Canvas上禁用此行为,以便移动访问者也可以在上面实际绘制一些东西?为了您的引用,这里有一个简单的例子:functioninit(){varcanvas=document.getElement

javascript - 动态 "unload"从 Canvas 处理 JS 草图

我正在使用一些javascript来允许用户在单击时动态加载草图到Canvas元素,使用:Processing.loadSketchFromSources('canvas_id',['sketch.pde']);如果我第二次(或第三次...)调用Processing.loadSketchFromSources(...),它会将第二个(或第三次...).pde文件加载到Canvas上,这正是我所期望的。我希望用户能够单击另一个链接以加载不同的草图,从而有效地卸载之前的草图。有没有我可以调用的方法(或我可以使用的技术)来检查Processing是否有另一个草图在运行,如果有,告诉它先卸载它

javascript - 避免在 JavaScript 中使用魔数(Magic Number) - 与 JsHint 一起使用的替代方案

JSHint的检查现在内置到PhpStorm中,让我了解了JavaScript魔数(MagicNumber),我意识到这将使代码更清晰以避免使用它们。我试过这个:varconstants={millisecs:1000,secs:60};还有这个:varconstants=function(){this.millisecs=1000;this.getMillisecs=function(){returnthis.millisecs;};};JsHint提示两者。从thisanswer中获取解决方案虽然工作正常:varconstants=(function(){varmillisecs=

javascript - 将 Canvas 上的视频转换为 3d 网格的合适起点是什么

目前是否有用于将Canvas中的视频流转换为3D网格的JavaScript库?示例情况是将相机对准杯子并捕捉原始图像,将以前的数据与新数据进行比较以生成视野内物体的边缘轮廓,理想情况下将其转换为最简单的多边形集并显示在第二个Canvas元素中计算多边形/模型。我看过mrdoob在3djavascript上的一些出色工作,从对象文件到Canvas中的渲染,但我希望捕获原始数据并尝试生成网格。目的是通过套接字在2个用户之间发送网格点,以获取当前在相机View中捕获的任何对象。感谢任何帮助。 最佳答案 它不是一个库,但这里演示了您正在寻找