HTML5

克隆Fabric.js中的对象

我使用一个简单的函数在Fabric.js中的画布上克隆一个选定的对象。 function duplicateObj(){ var obj = canvas.getActiveObject(); var clone = fabric.util.object.clone(obj); clone.set({left:100,top:100}); canvas.add(克隆); } ..
发布时间:2018-07-05 10:18:46 HTML5

需要加快我的SVG。我可以转换为WebGL或画布吗?

我有一个包含10138个零件的SVG图纸,因此它运行缓慢。 我想让它更像 http://workshop.chromeexperiments.com/globe 以下是我正在考虑的解决方案/问题 有没有办法让SVG部件以较少处理器密集的方式呈现? 我可以将SVG转换为WebGL或画布吗? 我可以将它作为SVG运行但是通过WebGL或画布渲染吗? 我只想让它更快..想法? ..
发布时间:2018-07-05 10:17:25 HTML5

如何在nodejs中获取视频的快照?

我正在尝试编写一个nodejs服务器,它将花费一些时间输入(可能是url路径的一部分),然后在那个时间索引处提供一个视频帧的静止图像作为jpeg图片。 我可以在普通的Javascript中轻松完成这项工作,但是我无法在nodejs中看到这样做的方法。我知道我可能需要使用像canvas-canvas这样的画布插件来创建快照。 欢迎任何想法。 以下是我目前在Javascript中的表 ..
发布时间:2018-07-05 10:16:49 HTML5

HTML5视频和画布

我有一个视频,我需要在不同的时间从中捕获3张图像。时间不是随机的,我必须在指定的时间拍摄图像(13:10:02,13:10:03,13:10:04)。当我访问页面时,图像应该显示在页面上,而不是当我单击按钮或类似的东西时。 到目前为止,我尝试了一个我在互联网上找到的例子,但是在这个例子中,单击一个按钮后显示图像,我不知道如何给出指定的时间。 ..
发布时间:2018-07-05 10:16:21 HTML5

如何在HTML5游戏中提高许多对象的性能?

当需要显示许多物体并计算位置,碰撞检测,反应等时,我可以做些什么?我希望一切看起来都很顺利?这是我正在开发的示例。我希望如果我在屏幕上有100个球,我可以顺利地展示它们。但我不知道该怎么做。每个建议都将受到赞赏。 解决方案 在HTML5 Rock的 ..
发布时间:2018-07-05 10:15:54 HTML5

如何在canvas元素中使用html内容

任何人都可以告诉我如何将我的html内容放在画布上。如果我们能够这样做,那些元素的属性和事件是否有效,并且我也在该画布上绘制了动画。 解决方案 来自关于MDN的这篇文章: 您不能只将HTML绘制到画布中。相反,您需要使用包含要呈现的内容的 SVG图像。要绘制HTML 内容,您需要使用包含HTML的元素,然后 将SVG图像绘制到画布中。 建议你按照以下步骤操作: 这里 ..
发布时间:2018-07-05 10:13:29 HTML5

如何为HTML5画布注册onkeydown事件

我想用HTML5 元素编写一个蛇游戏演示。我试图注册键盘(onkeydown)事件,但它不起作用。 代码: canvas.onkeydown = divertDirection; //不工作 //canvas.addEventListener(\"keydown“,divertDirection,false); //不工作 //根据键盘来调振蛇移动的方向 ..
发布时间:2018-07-05 10:13:01 HTML5

使用Canvas + HTML5将客户端rgb-jpg转换为8位jpg

许多文章都展示了在客户端使用canvas + html5将jpeg文件转换为灰度的方法。但我需要的是在上传到我的服务器之前将图像转换为8位灰度以减小其大小。 是否可以使用canvas + html5进行? 解决方案 whatwg规范提到了一个toBlob方法,该方法应该将画布转换为jpeg或png,并为您提供二进制表示。不幸的是,它还没有被广泛支持。 所以你所能做的就是使用ge ..

将键盘事件附加到html5画布

看起来鼠标事件会将侦听器添加到 canvas 元素,但是键盘事件似乎不适用于 canvas 元素。 示例: http://jsfiddle.net/H8Ese/1/ 浏览器: Chrome 14.0 FF 5.0.1 我知道我可以使用文档级别的侦听器,但我正在尝试首先获取Canvas元素(这样你的键盘就可以在页面的其他地方工作)。 关于如何在canvas元素上进行关键 ..
发布时间:2018-07-05 10:11:50 HTML5

使用WebGL绘制图像

请有人解释如何在WebGL画布上绘制图像吗?目前,在常规的'2d'画布上,我正在使用它: var canvas = document.getElementById(“帆布”); var cxt = canvas.getContext('2d'); img.onload = function(){ cxt.drawImage(img,0,0,canvas.width,canva ..
发布时间:2018-07-05 10:11:45 HTML5

将html5画布输出保存到我​​的rails应用程序

我正在尝试将html5画布的内容保存到我的Rails应用程序中。我找到了 var url = canvas.toDataURL('image / png'); 但我无法弄清楚如何进入我的帖子/表格。 我使用carrierwave来处理图像,但我没有上传图像,而是希望用户在画布上绘制图像。 我在考虑类似于将表单的输入文件设置为此内容但似乎不是它的工作方式 ..
发布时间:2018-07-05 10:11:17 HTML5

如何将onclick事件绑定到饼图段?

如何将onclick事件绑定到饼图段? https://github.com/sauminkirve/HTML5/blob/master/PieChart/piechart.html 解决方案 饼图段实际上是一个楔子。你有几种方法来测试楔形。 一种方式是数学方式: 测试鼠标是否在由楔形创建的圆的半径范围内。 如果半径测试为真,则计算角度鼠标与圆的中心点相对应。 ..
发布时间:2018-07-05 10:09:44 HTML5

在Canvas上调整亮度/对比度的公式?

正如有一个将图像转换为灰度的公式,是否有一个公式可以增加图像的亮度并将其降低到相同的水平?我尝试为每个r,g和b像素添加一个值。它确实增加了亮度但是当我减少相同的值时,我没有得到原始值。 var pixels = context.getImageData(...); //循环像素数据并添加值 p [i] = p [i] +100; p [i + 1] = p [i + 1] ..
发布时间:2018-07-05 10:08:25 HTML5

如何填充画布上的“对面”形状?

说我在HTML5画布上有一个圆圈(圆弧)。我可以像这样填写: ctx.arc(100,100,50,0,2 * Math.PI) ; ctx.fill(); 这是一种享受。但是,如何填补相反的区域?现在它是白色的黑色圆圈,但我希望它沿着下图的线条(白色是背景颜色,黑色是填充颜色): 我知道我可以只使用黑色背景并绘制一个白色圆圈,但背景可以是任 ..
发布时间:2018-07-05 10:05:38 HTML5

在svg或canvas中将文本换行为圆形

将文本拟合到网站上的圆圈会有什么好的解决方案,所以它会与圆形曲线一起流动,而不是矩形边界框? 这是我想要实现的目标: 页面上有许多黑色圆圈(固定大小),每个圆圈旁边都有一个textarea。 当文本输入到textarea时,它出现在黑色圆圈中,它以两个轴为中心。 如果输入这么多的文本,那条线变得比圆的半径长,减去一个指定的边距值,那么这条线就会像你想象的那样在常规包装中断开,文本块仍然 ..
发布时间:2018-07-05 10:04:39 HTML5

CanvasCaptureMediaStream / MediaRecorder帧同步

使用 CanvasCaptureMediaStream 和MediaRecorder时,是否有在每一帧上获得一个事件的方式? 我需要的东西与 requestAnimationFrame() ,但我需要它用于CanvasCaptureMediaStream(和/或MediaRecorder) )而不是窗口。 MediaRecorder可能以与窗口不同的帧速率运行(可能以不常规的可分率,例如25 ..
发布时间:2018-07-05 10:04:22 HTML5

在动画HTML5画布中缩放和平移

我有一张地图。我希望用户能够缩放和平移地图。想象一下谷歌地图,但不是无限地平移,地图是一个正方形(如果你超越它的边缘,它不会再次环绕)。 I使用 scale()和 translate()实现了缩放和平移。这些效果很好。 我被困在最后一部分 - 当用户放大时,我想围绕该点居中放大。很难用语言来解释,所以想象一下当你在谷歌地图中鼠标滚动时会发生什么 - 这就是我想要的。 我已经查看了 ..
发布时间:2018-07-05 10:03:49 HTML5

Fabric.js画布上的多个剪裁区域

为了制作 Photo Collage Maker ,我使用具有基于对象剪辑功能的fabric js。此功能很棒,但该剪切区域内的图像无法缩放,移动或旋转。我希望固定位置剪切区域和图像可以根据用户需要定位在固定剪切区域内。 我用Google搜索并找到非常接近的解决方案 var canvas = new fabric.Canvas( 'C'); var ctx = canvas.ge ..
发布时间:2018-07-05 10:03:01 HTML5