小编mar*_*rkE的帖子
如何确定html视频元素上的预期帧速率
有没有办法确定在html视频元素中播放的内容的预期帧速率？
视频元素是否知道预期的FPS或帧数,或者只是"猜测"(可能是24fps)并以猜测的速度播放？
以下是我不成功的尝试:
在视频元素本身上寻找FPS或FrameCount属性 - 不!
查找有关FPS或FrameCount的跨视频格式标题信息 - 没有任何一致性!
寻找在换帧时触发的事件 - 不!
我的下一次尝试更复杂:通过捕获画布元素的帧来对视频进行采样,并通过确定像素何时发生变化来计算帧数.
在做复杂的尝试之前,有没有人有更简单的答案？
推荐指数
解决办法
查看次数
从文本html画布中提取路径
无论如何从html 5中的文本字母中提取路径,然后沿着该路径获取(x,y)坐标,以便字母可以通过沿着该字母路径的圆圈形成？
我想采用x,y坐标并在其位置应用一个形状,使其类似于"像素化"格式的文本字符串,然后是一些动画效果.
有关在画布上沿着字符路径获取某种x,y坐标的任何建议都会很棒.
编辑:我实际上是在尝试自动生成坐标,以执行与此类似的操作:http://www.html5canvastutorials.com/labs/html5-canvas-google-bouncing-balls/
推荐指数
解决办法
查看次数
如何获取网页上任何指定像素的颜色？
我最初的搜索表明,出于安全考虑,我可能无法做到这一点,但无论如何我都会问.如何获取网页上任何指定像素的颜色？
更具体地说,这是我自己的网页,其中包含背景颜色,图像,css-modified-elements.我需要知道完全渲染的网页上特定像素的颜色.信息不能来自屏幕抓取,因为我想修改我完全呈现的页面.
哎哟!!! 有人真的"减1"我问真正的问题吗？艰难的人群!
更具体一点:我想在网页中添加一个用户可移动的canvas元素,可以直观地改变画布悬停在其上的网页部分.将canvas元素视为用户可以在网页上移动的放大镜.但是我想要canvas元素产生的实际效果是一个滤色器(因此需要底层颜色).
推荐指数
解决办法
查看次数
CanvasRenderingContext2D.putImageData 的参数 1 未实现 ImageData 接口
大家好，我正在尝试使用 node.js 制作一个 html5 cavas 应用程序，但我遇到了一个问题，我使用 getImagedata() 获取图像数据并将其作为 JSON 对象发送到服务器，服务器将该对象传递给所有连接的客户端但我收到“CanvasRenderingContext2D.putImageData 的参数 1 未实现 ImageData 接口。” 所有其他客户端上的错误。任何帮助将不胜感激，以下是将发送图像的客户端代码：
var output = function(mousestartposition , currentmouseposition){
**lastpositionpic = context.getImageData(0,0,canvas.width , canvas.height);**
var data = {
mousestartposition : mousestartposition ,
currentmouseposition:currentmouseposition,
lastpositionpic : lastpositionpic
}
socket.emit('senddraw' , data);
}
接收图像的客户端代码如下：
socket.on('receivedraw' , function(data)
{
mousestartposition = data.mousestartposition;
var currentmouseposition = data.currentmouseposition;
lastpositionpic = data.lastpositionpic;
**context.putImageData(lastpositionpic,0,0);** // i am getting error on this line
draw(currentmouseposition);
});
推荐指数
解决办法
查看次数
Agar.io风格的波纹效果为帆布弧
我真的很喜欢他们如何创建在线游戏agario.我一直在想:"他们是如何为边缘创造这种涟漪效应的？"
我能想到一些事情:
1)边框由许多矢量点组成,因此允许灵活的边框动画.
2)边框是预定义的gif,如动画.
3)边缘周围有许多不可见的像素.它们围绕弧线循环并激活这些像素的几组,因此产生边界"收缩"和"收缩"的错觉.
如何在HTML5画布中完成这样的事情？您认为解决方案的3个想法之一适用还是比这更复杂？
推荐指数
解决办法
查看次数
使用html5画布将图像剪辑为多边形的可重用功能
猜猜帖子的标题可能需要编辑,但是现在我不知道问题出在哪里.我在这里和其他地方阅读了类似问题的页面和答案.One Stack Overflow答案特别接近,但我不明白.
我想要一个函数,在画布上以所需的坐标绘制多边形,并用从文件加载的一些背景图像填充它们(足够大,不需要平铺).三角形可以用于测试.显然我应该使用drawImage和clip,并为多边形赋予边框,我可以为剪辑和笔划重用相同的路径.显然我应该保持秩序
- define path
- save
- clip
- drawImage
- restore
- stroke.
还可以在某处读取一次加载图像就足够了.(如果你想让我引用所有这些假设的来源,我会寻找我看到它们的位置.大部分都在Stack Overflow上)
HTML是空的
<body onload = "main ();"></body>
第一种方法,假装浏览器将等待图片加载:
var ctx, img;
var image_path = 'bg.jpg';
function main () {
var CANVAS_SIZE = 600;
var view_field_cnv = document.createElement ('canvas');
view_field_cnv.width = CANVAS_SIZE;
view_field_cnv.height = CANVAS_SIZE;
view_field_cnv.style.border = "1px solid";
document.body.appendChild (view_field_cnv);
ctx = view_field_cnv.getContext ('2d');
img = document.createElement ('img');
img.src = image_path;
place_triangle (0, 0);
place_triangle (300, 300);
place_triangle (500, 500);
place_triangle (0, …推荐指数
解决办法
查看次数
如何水平翻转图像
我怎样才能只画两张带有反转的图像我不知道如何反转。请帮忙。
var canvas = document.createElement('canvas');
canvas.width = 16 * scale;
canvas.height = 32 * scale;
//we assign the same classname the image has, for CSS purposes
canvas.setAttribute('class', skinImage.getAttribute('class'));
canvas.setAttribute('title', skinImage.getAttribute('title'));
var context = canvas.getContext("2d"),
s = scale;
context.imageSmoothingEnabled=!1,
context.mozImageSmoothingEnabled=!1,
context.oImageSmoothingEnabled=!1,
CanvasRenderingContext2D.webkitImageSmoothingEnabled=!1,
context.clearRect(0,0,canvas.width,canvas.height);
//back draw the head
context.drawImage(skinImage, 24, 8, 8, 8, 4*s, 0*s, 8*s, 8*s);
//back draw the body
context.drawImage(skinImage, 32, 20, 8, 12, 4*s, 8*s, 8*s, 12*s);
//back draw the right leg
context.drawImage(skinImage, 52, 20, 4, 12, …推荐指数
解决办法
查看次数
d3更新选择:d3如何决定捕获哪些现有的html元素供自己使用？
我是d3的新手,我需要一些帮助来理解html元素的重用.
这是一个小提琴:http: //jsfiddle.net/m1erickson/qmEBE/
我在主体中放置了一个现有的段落元素:
<body>
<p> Old Text.</p>
</body>
然后我定义了一个3个数字的数据集,并像这样做一个.selectAll("p"):
var dataset = [10,20,30];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text( function(d){ return("#"+d); } ) ;
我明白了:
Old Text.
#20
#30
有两件事困扰着我:
为什么d3没有创建新的p-tag并显示#10？
当我查看预先存在的段落元素("旧文本")时,d3已分配d3数据属性== 10.如果d3捕获了这个p-tag,为什么不用它来显示数据呢？
d3如何决定在"更新选择"中包含哪些预先存在的网页元素？
到目前为止BTW-on d3:首先定义数据并遵循设计的想法让我感到自由.
[编辑:我有这个权利吗？]
基于来自@ meetamit的信息性答案......
以下内容在元素内创建更新选择
elements =d3.select(“body”).selectAll(“p”).data(dataset)
以下原因导致d3创建一个输入选择,其中为20和30创建了p标签.
elements.enter() .append("p")
题:
此时更新选择是否已与输入选择合并？
以下设置了所有3个p标签中的文本,因为它们都在合并的更新选择中.
elements.text(function(d){return("#"+d);});
题:
由于d3将从网页捕获现有的p-tag等,通常的做法是将初始d3.select指向一个容纳d3结果的容器,如下所示:
elements = d3.select(“#myD3Div”) ….
推荐指数
解决办法
查看次数
在画布中填充一部分绘制的图像
我使用html5 canvas的drawImage()api绘制了一个图像.现在我想用不同的颜色填充该绘制图像的白色空间(单个盒子单独的颜色).我该怎么做？我正在使用html5 canvas和jquery.
我想用不同的颜色填充白色空间,那些白色空间不是正确的矩形框.
提前致谢.
推荐指数
解决办法
查看次数
我如何使用 html/css/js/ 在 2 个画布之间切换可见性？
亲爱的stackoverflowers
我有 2 个画布：
- 显示演示文稿的画布，
- 和第二个隐藏画布来创建演示文稿。
我需要通过单击一个按钮来切换哪个画布可见
</div>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;" hidden="outputcanvas">
</canvas>
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
<!-- input canvas -->
<div>
<canvas width="800" height="600" hidden="inputcanvas" ></canvas>
</div>
是否可以 ？如果是这样，如何？
此时我试图用JS解决它^^
提前致谢
推荐指数
解决办法
查看次数