草庐IT

canvas2d

全部标签

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

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

javascript - 在 Canvas 中标记两个圆圈之间的相交区域

我试图标记两个圆圈之间的重叠区域(就像在维恩图中)。我认为这样做的方法是使用两个相交点绘制两条弧线,然后使用fill()填充路径。我知道交点的坐标,但如何将其用作arc()函数的输入?ctx.beginPath();ctx.arc(circle1.x,circle1.y,circle1.r,?,?,true);ctx.fill();ctx.closePath(); 最佳答案 您可以使用Canvas的globalCompositeOperation绘制两个形状的交集globalCompositeOperation允许您控制在Canva

javascript - 如何改变 HTML canvas 中的线条粗细?

我这里有一个例子http://jsfiddle.net/8NzjH/我正在尝试绘制一条粗的中间线,如下所示:varcontext=canvas.getContext("2d");context.strokeStyle='#000000';context.fillStyle='#000000';context.moveTo(10,10);context.lineTo(50,10);context.save();context.lineWidth=15;context.moveTo(10,30);context.lineTo(50,30);context.restore();context

javascript - 隐藏 <canvas> 元素

在我的javascript代码中的某处,有一个函数可以在我的代码中注入(inject)canvas元素。Canvas元素显示10秒,然后消失。这是被注入(inject)的代码..问题是我无法在我的javascript中找到那段代码。还有其他方法可以完全隐藏吗? 最佳答案 真的吗?ican'tfindthatbitofcodeinmyjavascript无论如何,假设(!)这是x==0,y==2的唯一Canvas,宽度==46,height==17,您可以使用document.querySelector获取Canvas并将其隐藏。//

javascript - svg Canvas 内的原生按钮标签

我需要在SVGCanvas中放置一个按钮标签,有什么办法吗?(我正在使用拉斐尔JS)我知道我可以在svgCanvas内“绘制”一个按钮并编写onclick事件代码,但我想保留浏览器按钮的原生外观和感觉。谢谢你。 最佳答案 可以在SVG中使用HTML按钮,使用SVGforeignObject元素:http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement规范中包含如何使用它的示例。不幸的是,我不确定如何最好地使用raphaeljs中的foreignObject。我相信foreig

Javascript Canvas 碰撞检测

我正在使用需要碰撞检测的Canvas在Javascript中构建游戏,在这种情况下,如果玩家Sprite击中盒子,则不得允许玩家穿过盒子。我有一个名为blockList的全局数组,它包含绘制到Canvas上的所有框。它看起来像这样:varblockList=[[50,400,100,100]];他们像这样被吸引到Canvas上:c.fillRect(blockList[0][0],blockList[0][1],blockList[0][2],blockList[0][3]);我还有一个播放器对象,它有一个更新方法和一个绘制方法。Update根据键盘输入等设置玩家的位置,主游戏循环使用

javascript - Canvas lineTo() 在错误的位置绘制 y 坐标

我正在尝试使用ctx.lineTo()在Canvas上绘制一些矩形。他们被画出来了,但是y坐标永远不对。矩形变得太高并且位于y轴上的错误位置。当我逐步使用调试器时,它显示lineTo()方法中的y坐标是正确的,但我创建了一个canvas.click事件来提醒坐标(当我单击左上角时它是正确的,它会提醒(0,0)).单击事件显示y坐标实际上并不在它声明将在lineTo()方法中绘制的位置。然而,x坐标总是正确的。要考虑的一件事是我通过将html附加到带有javascript的元素来创建我的Canvas,并向其中添加我绘制的图像。我重新缩放矩形的坐标,以便将它们适本地放置在Canvas上,C

javascript - 使用 sketch.js 为移动网页绘制 Canvas 会在触摸时重置

我正在使用sketch.js插件在HTML5Canvas上绘图。虽然它在台式机上运行良好,但在移动浏览器上似乎存在一些问题。问题是,如果我绘制2个不同的形状,我一触摸它,Canvas就会重置为空白。为了完全清楚,我将制作示例:绘制数字“12”将首先绘制“1”,然后当我开始绘制“2”时,Canvas将清除并仅保留数字“2”...$(function(){$('#canvas1').sketch();});就是这样。我想知道是否有一些解决方法来保留各种图纸的历史记录。我愿意接受任何建议,或者想知道您是否发现了类似的问题。 最佳答案 要真

javascript - 如何始终将焦点保持在 Canvas 上?

我一直在这个论坛上寻找解决方案,但还没有找到。无论我在页面上的哪个位置单击,我都需要始终将注意力集中在Canvas元素上。我有几个按钮,在我写的每个onclick事件中:document.getElementById('canvas').focus();这确实有效,但我认为这不是最佳做法。有什么想法吗? 最佳答案 Canvas元素默认是不可聚焦的。您需要先为其设置一个tabIndex。例子document.querySelector("canvas").onblur=function(){varme=this;me.style.ba

javascript - 在 matterjs 中更改默认 Canvas 大小

我正在尝试覆盖设置为的默认Canvas大小:800x600在深入研究文档后,我发现:Matter.Render.create([options])看起来有趣的选项是:render.options.height和render.options.width。如何正确使用它们?我尝试过的:(function(){//thisisthecorrectreferencevarcanvas=document.getElementById('canvas');varrenderer=Matter.Render.create({canvas:canvas,height:1000,width:1000})