草庐IT

canvas-editor

全部标签

javascript - HTML 5 Canvas 中的一手拉圆模拟

followingcode使用jQuery在HTML5Canvas中创建一个圆圈:代码://getareferencetothecanvasvarctx=$('#canvas')[0].getContext("2d");DrawCircle(75,75,20);//drawacirclefunctionDrawCircle(x,y,radius){ctx.beginPath();ctx.arc(x,y,radius,0,Math.PI*2,true);ctx.fillStyle='transparent';ctx.lineWidth=2;ctx.strokeStyle='#003300

javascript - Ace Editor 手动添加片段

长话短说我正在尝试通过函数调用而不是传统方法(键盘键)手动触发ace编辑器片段。解释我需要一个将编辑器和片段字符串作为参数的函数,并将该片段添加到编辑器中。函数addSnippet(editor,snippet)。Ace编辑器支持TextMate-ish片段。if(${1:condition_name}){${2:body}}所以当我们调用这个函数时,它应该添加代码片段,突出显示代码片段标记并选择第一个。填充第一个并点击选项卡后,编辑器应移至下一个片段标记。就像在KitchenSink中一样示例(但我想通过函数调用来添加/触发片段)。我尝试通过黑客攻击并取得了thisfunction.

javascript - canvas.toDataURL 导致纯黑色图像?

我有一个Canvas元素,里面有一些涂鸦。我正在使用以下方法将Canvas转换为jpeg:vardata=canvas.toDataURL("image/jpeg",0.5);varimg=newImage();img.src=data;$("body").append(img);然而,我得到的不是我的涂鸦,而是纯黑色的jpeg。谁能告诉我我做错了什么?谢谢! 最佳答案 发生这种情况是因为JPEG不支持透明背景。如果您希望支持透明背景,请使用png(默认扩展名),否则您可以使用为Canvas设置非透明填充颜色。fillStyle和。

javascript - 缩放 fabric.js Canvas 对象

我的页面上有一个fabric.jsCanvas,我想对其进行响应。我的代码适用于缩放Canvas本身,但不适用于我在其上绘制的对象。任何的想法?我搜索过SO但找不到适合我的解决方案。varresizeCanvas;resizeCanvas=function(){varheight,ratio,width;ratio=800/1177;width=tmpl.$('.canvas-wrapper').width();height=width/ratio;canvas.setDimensions({width:width,height:height});};Meteor.setTimeout

javascript - canvas 的 toDataURL() 函数有哪些可能的数据类型?

canvas.toDataURL(type,encoderOptions);MDN关于type参数的描述如下:typeOptionalADOMStringindicatingtheimageformat.Thedefaulttypeisimage/png.我还没有找到所有类型,因为我正在尝试评估在不同情况下可能使用的类型。编辑:MSDN'sarticle关于toDataURL()也无济于事。我知道以下内容:image/png质量(编码器选项)似乎不影响输出image/jpeg质量(编码器选项)影响输出image/webp质量影响输出。(根据MDN,仅限Chrome)。但环顾四周后,我似

javascript - HTML5 Canvas 重绘周期性能优化

我们正在构建一个在浏览器中运行的CAD应用。C.A.D代表ComputerAidedDesign.Illustrator、CorelDraw、AutoCAD等是CAD应用程序的一些示例。它基于Paper.js,一个非常简洁的Canvas库,允许您以编程方式操作矢量。问题我目前遇到的主要问题是重绘周期性能。重绘算法是“愚蠢的”(就提高性能的巧妙技巧而言),因此效率低下且速度慢-渲染场景图形项目依赖于逐渐变慢的重绘周期。随着绘制点的积累,每个重绘周期变得越来越慢。重绘方案非常简单:清理整个区域从场景图中取出所有项目重绘所有项目。问题在这种情况下是否有渲染优化的任何类示例-假设我想停止实现脏

javascript - 如何在 Fabric.js 中将对象动态缩放到 Canvas 大小

我想增加我的svg图像的高度和宽度,使其与Canvas的高度和宽度相同,以便它看起来像Canvas的背景图像。当我按下设置背景按钮时,一张svg图像将从我的目录设置为Canvas。我想动态地将此图像缩放到Canvas的高度和宽度。预期输出:IwantthisHTMLcanvas脚本$(document).ready(function(){varcanvas=newfabric.Canvas('c');varcolorSet="red";$("#svg3").click(function(){fabric.loadSVGFromURL('http://upload.wikimedia.o

javascript - Canvas 被跨源数据污染

我正在从我可以信任的第三方站点加载动态jpeg。我正在尝试getImageData()但浏览器(Chrome23.0)提示说:Unabletogetimagedatafromcanvasbecausethecanvashasbeentaintedbycross-origindata.SO上有一些类似的问题,但他们使用的是本地文件,而我使用的是第三方媒体。我的脚本在共享服务器上运行,我不拥有远程服务器。我尝试了img.crossOrigin='Anonymous'或img.crossOrigin=''(参见thispostontheChromiumblogaboutCORS),但没有帮助

javascript - 我如何判断一个 javascript 对象是图像还是 Canvas ?

我有一个类,其属性可以是图像(即IMG元素)或Canvas。当我将它序列化为JSON时,我需要将其转换为文本字符串。如果它是Canvas,那么我可以调用Canvas#toDataURL。但如果它是一个图像,我首先需要用Canvas#drawImage将它绘制到一个Canvas上,然后用toDataURL序列化那个Canvas。那么如何判断对象是Canvas还是Image呢?(因为Canvas#drawImage能够接受Image或Canvas对象作为参数,所以一定有办法。)我看到一些程序员通过测试某些属性或函数的存在来确定类,但我想知道是否有更聪明的方法,即使这些对象提供的API发生变

javascript - 具有完整 Outliner 支持的 Eclipse Javascript Editor 2012

就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter寻求指导。10年前关闭。使用IDE的原因是它提供的综合设施。因此,我假设有一个JavascriptEclipse编辑器,提供基于大纲的基本IDE设施,例如:大纲与ObjectLiteral支持(显然很少见)智能代码完成使用Outliner数据智能代码高亮使用Outliner数据,而不仅仅是相似的词文件间作用域(@include"otherfile.js")但是,对于Java