草庐IT

html5Canvas

全部标签

javascript - 如何检查 HTML 元素的动画?

我想查看分配给特定元素的CSS过渡或JavaScript/jQuery动画。我应该如何在ChromeDevTools或任何其他开发者工具中执行此操作?例如,我访问了一个Google+页面,我注意到当我将鼠标悬停在一张图片上时,它会变灰、放大,并且Angular落会出现一个关闭按钮。正常:悬停:如何查看此行为背后的代码? 最佳答案 右键单击元素选项卡中的html元素,然后选择:悬停选项。现在您可以在右侧样式选项卡中看到应用于特定元素的悬停CSS。请引用屏幕截图 关于javascript-如

javascript - 如何遍历 HTML DOM?以及如何获取元素的事件、样式和属性(附示例)

编辑2(解决方案)Javascript对于“可能的”javascript方式,请参阅下面的@sabof回答:https://stackoverflow.com/a/22172009/3309243…………JQUERY事件:我很快制作了一个示例函数getEvents(),但它似乎有效:)属性:我在互联网上的某个地方找到了这个,通过使用.attr()返回所有属性另外,我刚刚发现了有关在浏览器中进行调试的知识,因此现在知道如何查看对象。可能有人想知道如何:打开您的控制台(在FireFox中至少为f12)并在控制台命令行中键入例如$("body")(一直在底部),单击返回的对象并查看控制台:P

javascript - JS Canvas - 以指定 Angular 画线

我想制作一个应用程序,让球按照鼠标击中它的Angular移动。因此,如果您从左上象限以30度Angular向下滑动鼠标(我猜那将是180-30=150度Angular),它会以这种方式击球。我一直在这样画我的线条:functiondrawAngles(){vard=50;//startlineat(10,20),move50pxawayatangleof30degreesvarangle=80*Math.PI/180;ctx.beginPath();ctx.moveTo(300,0);ctx.lineTo(300,600);//x,yctx.moveTo(0,300);ctx.line

javascript - Canvas drawImage 不在 Cordova 中绘制,安全问题?

我想在Cordova应用程序中将图像绘制到Canvas上。当图片路径在www内时我的应用程序的目录,绘图按预期工作。但是,如果图像是由Cordova相机制作的,因此存储在../../tmp中。关于www目录,drawImage(...)产生黑色图片。这可能是一个安全问题,因为可以在www中找到该应用程序的源代码。目录,但图像不是。另一方面,标签可以毫无问题地显示这些图像。问题真的是安全问题吗?我能做些什么来解决它,即不产生黑色图片? 最佳答案 在尝试了无数次之后:问题很简单,我想使用drawImage()的图像分辨率太高了。降低分辨

javascript - Canvas 在移动网络上获得触摸位置

我有一个代码,它从(x,y)坐标拖动一条线到新鼠标(x,y)坐标。这在桌面浏览器中工作正常,但由于某种原因它在移动浏览器中不起作用。我添加了触摸事件监听器,但我想坐标是如何变得不正确的。这是我的代码:functiongetMouse(e){varelement=canvas,offsetX=0,offsetY=0;if(element.offsetParent){do{offsetX+=element.offsetLeft;offsetY+=element.offsetTop;}while((element=element.offsetParent));}mx=(e.pageX-off

javascript - PerformanceTiming.responseStart 是指向 HTML 还是 headers 开始?

我有一个关于PerformanceTiming.responseStart的问题.它是timetofirstbyteofheaders还是atimetofirstbyteofHTML?在某些项目中,这个时间可能会非常不同。例如当使用渐进式页面呈现时。 最佳答案 [...]mustreturnthetimeimmediatelyaftertheuseragentreceivesthefirstbyteoftheresponsefromtheserverhttp://www.w3.org/TR/2012/REC-navigation-t

javascript - 使用 webpack-dev-server 时,html-webpack-plugin 不会将 js 文件注入(inject) index.html

这是我的webpack配置:varpath=require('path');varwebpack=require('webpack')varHtmlWebpackPlugin=require('html-webpack-plugin')varfs=require('fs'),buildPath='./dist/';varfolder_exists=fs.existsSync(buildPath);if(folder_exists==true){require('shelljs/global')rm('-rf','dist')};module.exports={entry:'./src/

javascript - 如何将嵌入式 YouTube 视频的帧(通过 iframe)写入 Canvas ?

我希望能够从YouTube视频中的不同点(不仅仅是缩略图)提取帧,并对它们进行一些处理。我可以使用iframeAPI将视频嵌入我的网站,但我正在努力寻找一种方法将其捕获到Canvas上。(如果我被迫捕获整个屏幕没关系,如果我必须更改浏览器设置以允许它也没关系。) 最佳答案 一种选择是编写浏览器扩展。但我猜你会想避免这种情况。另一种选择是使用ScreenCaptureAPI(Chrome、Edge和Firefox支持)。查看browsercompatibilityinformation在MDN上。使用此API,您可以允许您的用户共享他

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的代码。