草庐IT

wxml-to-canvas

全部标签

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 - 读取 JSON Tiled map 编辑器文件并显示到 Canvas

我正在关注这个this能够在我的javascript/canvas游戏中加载由平铺map编辑器创建的jsonmap文件的教程。我已经实现了我自己的版本,并且在控制台或网络等中的firebug中没有出现任何错误。据我所知,通过放入console.logs和警报,脚本运行得非常好!问题是Canvas保持空白!当它现在应该有一个tilemap时。这是我在游戏中实现的教程版本:functionLevel(){varc;vardata;varlayers=[];this.get_map=function(name,ctx){c=ctx;$.getJSON('maps/'+name+'.json'

javascript - 从显示 :none to display:block 开始时使用 Javascript 淡入元素

我有一个脚本,在按下单选按钮时显示一个元素。我正在尝试淡化元素的显示,这样它就不会那么突兀。JS:document.getElementById('next').style.display='block';document.getElementById('next').fadeIn(1000);除了动画淡入淡出外,这工作正常。我究竟做错了什么。我试过将这两个语句合并为一个语句,我也试过在display:block之前设置淡入,但它根本不显示。对JS还是相当陌生,所以我只是想弄清楚什么是可能的。提前致谢 最佳答案 DOM元素上没有.f

javascript - 使用 javascript 将 Canvas 图像上传到 imgur (api v3)

我正在构建一个有趣的Chrome实验。mustache镜子!http://sjoerddijkstra.nl/cam/我想使用ImgurAPIV3将图像从tecanvas上传到Imgur,然后显示链接,但我真的不知道该怎么做。我找到的所有工作示例都使用V2API...我使用canvas.toDataURL:vardataURL=canvas.toDataURL("image/png");returndataURL.replace(/^data:image\/(png|jpg);base64,/,""); 最佳答案 Imgur文档在I

javascript - 如何在使用插件 sdk 创建的插件中使用 Canvas drawWindow 函数?

我使用addonsdk创建了一个Firefox插件.我正在尝试使用canvasdrawWindow功能。我有以下代码来使用该函数,其中ctx指的是我通过canvas.getContext("2d")获得的Canvas上下文。ctx.drawWindow(window,0,0,100,200,"rgb(255,255,255)");当我运行此代码时,在使用附加的脚本中tabs.activeTab.attach({contentScriptFile:data.url("app.js")//app.jscontainstheabovelineofcode});我收到以下错误:TypeErro

javascript - 检测在不可见和在视口(viewport)外时是否对canvas/css3动画进行了优化

我假设使用HTML5中的所有这些硬件加速动画,实际上不会渲染在视口(viewport)之外运行的动画。我希望能够检测到是否正在发生。我尝试在每秒移动100px的对象上循环使用webkitCSSMatrix来尝试确定每个刻度线移动了多少像素,但是如果我将动画移出视线则没有区别。有任何想法吗? 最佳答案 您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象之间的差异(计时器实际上并不能证明任何东西,但可以为您提供强大的indisium)。但是,了解Canvas的工作原理也可以为您提供坚实的指导。例如,Canvas是一个简单的

javascript - html2canvas - iframe 没有屏幕截图

我有一个任务需要在我的网页上加载URL(e.g.yahoo.com)并截取屏幕截图。我正在使用html2canvas截图并将其附加到页面正文。URL指定的页面已成功加载到div元素内的iframe中。但是当我尝试对其进行截图时,iframe区域变为空白。下面是previewURL和screenshot的代码。//topreviewtheURLcontentfunctionpreviewUrl(url,target){//usetimeoutcozmousehoverfiresseveraltimesclearTimeout(window.ht);window.ht=setTimeout

javascript - Chrome : Print exception details to console

如何从我的代码中打印chromedevtools中异常的堆栈跟踪?我尝试了以下方法:functiondoSomething(){undefined();//Thisthrowsanexception}try{doSomething();}catch(e){console.error("Exceptionthrown",e);}但这会产生以下结果:ExceptionthrownTypeError{}如果我展开它旁边的箭头,它会将我指向进行console.error()调用的行,所以我看不到原始错误实际发生的位置。在控制台输出中包含原始错误信息(包括错误发生的确切位置的消息和完整堆栈跟踪)

javascript - 未捕获的类型错误 : Cannot use 'in' operator to search for '0' in (jQuery)

我觉得这与AJAX调用有关。不太确定发生了什么。从技术上讲,该错误是在定义isArraylike(obj)函数的第584行的jQuery文件中抛出的。jQuery(document).ready(function(){varwidth_of_grams=$(window).width();varnew_pic_height=(width_of_grams/7);$("img.gram_photo").css('height',(width_of_grams)/7);$("#instafeed").css('height',2*new_pic_height);$(window).resi