草庐IT

HTML2Canvas

全部标签

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 - AngularJS 过滤器将 html 作为字符串返回

我已经创建了一个AngularJS过滤器来自动从数据中找到的地址创建可点击的链接。过滤器:app.filter('parseUrl',function(){var//URLsstartingwithhttp://,https://,orftp://replacePattern1=/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim,//URLsstartingwith"www."(without//beforeit,orit'dre-linktheonesdoneabove).replaceP

javascript - 为什么 html() 执行 JavaScript,而 innerHTML 不执行?

为什么这会执行:$('#jq_script').html("$('#test').text('test');");但这不是吗?document.getElementById('js_script').innerHTML="$('#test').text('test');";你可以看到它的实际效果here来自jQuery关于.html()的文档:Thismethodusesthebrowser'sinnerHTMLproperty.SomebrowsersmaynotreturnHTMLthatexactlyreplicatestheHTMLsourceinanoriginaldocum

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

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

javascript - 从 Nightmare.js 返回 HTML 正文

我目前正在使用cheerio和nightmare进行一些抓取。我同时使用两者而不仅仅是cheerio的原因是因为我必须操纵网站才能到达我想要抓取的部分,而且我发现nightmare非常擅长执行这些脚本。所以,现在我正在使用nightmare来获取显示我需要的信息的部分。之后,在evaluate()上,我试图以某种方式返回当前的html,然后将其传递给cheerio进行抓取。问题是我不知道如何从document对象中检索html。文档中是否有返回完整正文的属性?这是我正在尝试做的事情:varNightmare=require('nightmare');varnightmare=Night

javascript - 从内存中移除 HTML 元素(DOM 节点)

根据mdndocumentationremoveChild方法从DOM中删除一个节点,但它仍然驻留在内存中。我的问题是我也想从内存中删除它。我已经尝试使用delete运算符,但对象仍然存在...myCanvas.parentElement.removeChild(myCanvas);//myCanvasactuallyremovedfromDOMdeletemyCanvas;//false.doesnothingalert(myCanvas);//showsHTMLCanvasElementinsteadofundefined 最佳答案

javascript - 如何使用 JavaScript 暂停 HTML5 视频?

这个问题在这里已经有了答案:HowtopauseaHTML5videoonanevent?(3个答案)关闭4年前。最初视频是隐藏的。单击ID为3的图像时,视频可见。我放置了一个ID为close_video的按钮,它将隐藏播放器。问题是单击按钮后它仍在运行视频。如何暂停视频?代码是:$(document).ready(function(){$('#3').click(function(){$("#video").removeClass("popup-video").addClass("popup-video-show");});});$(document).ready(function(

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})