草庐IT

android - 用手指在 Canvas 中绘图,Android

全部标签

Javascript 和 Canvas : How to get rid of that Moiré effect in my gyroscope

出于乐趣,我使用Javascript和Canvas制作了那个小玩具陀螺(陀螺仪?)。不幸的是,它有一个丑陋的莫尔效应(见下面的截图)。http://jsfiddle.net/8bac4s9v/1/functiondraw(){varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.imageSmoothingEnabled=false;varcolors=[['blue','yellow'],['white','pink'],['green','red'],['white','black'],['gr

javascript - canvas.toDataUrl() 返回 'data:,'

我正在尝试调整图像大小并使用canvas.toDataUrl()取回base64字符串表示形式。我的代码如下(见下文)。我的问题是,每次我第一次启动它时,它都会返回“data:,”。然后,当我重新调整大小(使用按钮调用)时,它工作正常,并返回一个非空的base64字符串。这是怎么回事?functiondrawAndResizeFunction(images)varqDraw=$q.defer();//1drawCanvasWrapper().then(function(canvasData){qDraw.resolve(canvasData)});//2functiondrawCanv

javascript - 多次复制 Canvas : clone the canvas or copy the image data?

我的一个界面元素正在使用HTML5渲染元素和关联的JavaScriptAPI。此元素在同一屏幕上的多个位置以及整个应用程序的多个屏幕上使用。在需要的地方显示它的最有效方法是什么?我的第一个想法是绘制到主Canvas上,然后将其复制并插入页面中需要的位置。主Canvas可能是这样的:varmaster=$('').attr({width:100,height:100}),c=master[0],ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);假设我想复制这些div中的Canvas容器:....

javascript - ionic 避免 View 标题在 Android 上闪烁

我正在尝试按照ionic模板示例所建议的“标准”方式来制作选项卡内容页面。但是,我发现在Android中切换标签时,view-title会闪烁。您不会在iOS或桌面浏览器上看到闪烁。但是,如果您将Chrome中的设备模式切换到Android设备,您会看到闪烁。我怎样才能克服它?菜单.htmlLeftTab1Content1标签.htmlcontent1.htmlContent1content2.htmlContent2 最佳答案 感谢@AndresRehn分享链接(http://forum.ionicframework.com/t/

javascript - Canvas 弧的 Agar.io 风格波纹效果

我真的很喜欢他们创造在线游戏agario的方式。我一直在想:“他们是如何为边缘创造这种涟漪效应的?”我能想到的有几点:1)边框由许多矢量点组成,因此允许灵活的边框动画。2)边框是预定义的gif动画。3)边缘周围有很多不可见的像素。它们围绕圆弧循环并激活其中的几组像素,因此产生了边界正在“收缩”和“缩回”的错觉。如何在HTML5canvas中完成这样的事情?您认为我的3个解决方案想法之一是否适用,还是比这更复杂? 最佳答案 您可以做的是围绕圆周重复绘制正弦波。得到绕圆任意Angular正弦波[x,y]点的方程为:varx=center

javascript - Hammer.js:如何检测任意数量/多个手指的捏合

当我创建一个新的HammerPinch事件时,没有在选项中提及指针的数量,它最多只能检测到3个手指,如果我提到指针,例如varmultiPinch=newHammer.Pinch({event:'multipinch',pointers:4,threshold:0});,那么它只会检测到4根手指的捏合。我曾尝试在文档和所有地方进行搜索,但无法在一个事件中检测到2、3甚至10个手指的捏合。我需要这个,因为我的网络应用程序必须在81英寸大的屏幕上运行。 最佳答案 我终于解决了!我不知道这是否是黑客攻击,但它确实有效!最后的解决方案非常简

javascript - D3 : Zooming/Panning Line Graph in SVG is not working in Canvas

我使用SVG使用d3创建了zooming/panning图形。我正在尝试使用Canvas创建完全相同的图表。我的问题是,当涉及到Canvas图形的缩放和平移时,图形正在消失,我不知道为什么。我创建了两个JSBin来显示两者的代码。有人可以帮助我吗。SVG-JSBinCanvas-JSBin我的SVG缩放代码如下所示://ZoomComponentszoom=d3.zoom().scaleExtent([1,dayDiff*12]).translateExtent([[0,0],[width,height]]).extent([[0,0],[width,height]]).on("zoo

javascript - 使用Canvas将不透明像素变成白色

我正在寻找一种方法来拍摄图像(Logo、应用程序图标等)并使用javascript/canvas将它们转换为白色(不包括透明度)。这是我想要的示例(显然使用静态图像):http://jsfiddle.net/4ubyj/ 最佳答案 CanvasAPI具有专门用于“仅在原始图像中不透明的像素上绘制”之类的合成方法。这比弄乱图像数据要容易得多。jsFiddle示例(现在带有内联图像)向@WilliamVanRensselaer最初的fiddle致敬。您想要的复合操作是source-in,这意味着“仅在绘制图像中不透明像素之上绘制我要绘制

javascript - 在背景选项卡上运行 Canvas

我最近创建了一个HTML5Canvas动画(也使用Processing.js)。问题是当我将浏览器切换到不同的选项卡时,动画停止播放。当用户位于与包含动画的标签不同的标签时,如何让动画继续播放?例子:http://jsfiddle.net/EyFTr/3/如果您切换标签页,时钟会停止,但如果您打开一个新窗口的链接并模糊该窗口,时钟仍会移动。 最佳答案 简短的回答是你不能。https://developer.mozilla.org/en/DOM/window.setTimeoutIn(Firefox5.0/Thunderbird5.0

javascript - Google Maps APIv3 绘图管理器的 onChange 事件

我正在使用GMapsAPIv3DrawingManager让用户在map上绘制形状。我可以使用complete事件在将形状添加到map时触发操作(例如overlaycomplete或polygoncomplete)--但我也允许用户编辑完成的形状。有没有办法在形状改变时触发Action?当修改形状时,我看不到任何方式来触发另一个函数。 最佳答案 可在此处找到编辑事件列表:EditableeventsDraggingevents下面是一个例子,当圆的半径发生变化时如何将它与DrawingManager一起使用:google.maps.