草庐IT

canvas-wrapper-with-gettransform

全部标签

javascript - HTML5 Canvas 与 SVG + Raphael.js 的优缺点是什么?

我刚刚使用Canvas开始了一个项目。但我需要做的一件事是跟踪可移动的、可点击的框,如本例所示:http://raphaeljs.com/graffle.html所以我想知道Raphael-js+SVG是否会更好。你会用哪个?为什么? 最佳答案 这个答案是从我对另一个问题的回答中复制过来的。但是OP然后改变了问题,因此这个答案变得不那么相关了。恕我直言,它与这个问题更相关,所以这里是:将canvas和svg之间的区别想象成Photoshop和Illustrator(或者对于OSS用户来说是Gimp和Inkscape)之间的区别。一个

javascript - 使用 pdf.js 和 ImageData 将 .pdf 渲染到单个 Canvas

我正在尝试使用PDF.js阅读整个.pdf文档,然后在单个Canvas上呈现所有页面。我的想法:将每个页面渲染到Canvas上并获取ImageData(context.getImageData()),清除Canvas以执行下一页。我将所有ImageData存储在一个数组中,一旦所有页面都存储在其中,我想将数组中的所有ImageData放到一个Canvas上。varpdf=null;PDFJS.disableWorker=true;varpages=newArray();//Preparesomethingsvarcanvas=document.getElementById('cv');

JavaScript 样式 : don't use wrapper objects for primitive types

在GoogleJavaScript风格指南中,它说不要对基本类型使用包装对象。它说这样做是“危险的”。为了证明它的观点,它使用了这个例子:varx=newBoolean(false);if(x){alert('hi');//Shows'hi'.}好吧,我放弃了。为什么这里执行if代码? 最佳答案 因为每个typeofObject的变量都是真实的,包装器是对象。 关于JavaScript样式:don'tusewrapperobjectsforprimitivetypes,我们在StackO

javascript - 模拟 :starts-with or :ends-with for searching text? 的 jQuery 选择器

如果您查看selectorslist在jQuery网站上,有用于属性开始和结束的选择器。还有一个用于搜索文本的:contains选择器:alert($("div").find("span:contains(text)").html());jQuery是否有使用开头或结尾来搜索字符串的实现?仅供引用:我需要搜索XML对象。 最佳答案 据我所知不是默认情况下,但您可以通过$.expr[":"]添加自己的伪选择器:http://jsfiddle.net/h6KYk/.$.extend($.expr[":"],{"starts-with":

javascript - 此警告消息是什么意思? 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images'

为什么我会收到此警告?warning:imgelementsmusthaveanaltprop,eitherwithmeaningfultext,oranemptystringfordecorativeimagesjsx-a11y/img-has-alt它显示第13行,但没有使用任何Prop。 最佳答案 这意味着当您在HTML中创建图像时,为了屏幕阅读器和文本浏览器的利益,您应该包含一个alt属性。 关于javascript-此警告消息是什么意思?'imgelementsmusthave

javascript - 在 JavaScript Canvas 中沿直线移动一个点

假设我有一条线的坐标(25,3545,65,30,85-这将是一条分为两部分的线)。我需要每帧以恒定距离沿该线移动一个点(汽车)。我该怎么做? 最佳答案 嘿,所以你的2条线的坐标为(25,35)(45,65)(30,85),你要移动的点将放置在这些坐标(25,35)并且你希望它向第二个坐标(45,65)移动(第一条线段的末端)。第一步是获取点将要移动的方向,方向是点位置与目标位置之间的Angular。要找到这个Angular,您可以使用Math.atan2(),将targetpositionY-thepointpositionY作为

javascript - Angular 错误 : [filter:notarray] Expected array but received: {} with a filter on an ng-repeat

我正在尝试使用ng-repeat指令使用对API的Angular请求来填充html表。首先加载html页面,然后请求获取返回响应时填充表格的数据。当我向ng-repeat指令添加过滤器时,表格被填充并且过滤器起作用,但是在我的chrome浏览器控制台中,我收到以下错误:Error:[filter:notarray]Expectedarraybutreceived:{}http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7DatREGEX_STRING_REGEXP(angular.js:68)atangular.js:182

javascript - 使用 <canvas> 将非常大的 SVG 转换为 PNG

我正在尝试将一个大的SVG(它的数据URL大约有750000-1000000个字符)转换为PNG,方法是将它的数据URL通过图像传递到Canvas中,但图像只加载了大约1/4的图像SVG。创建方式:varsvg_xml=(newXMLSerializer()).serializeToString(svg),url='data:image/svg+xml;base64,'+btoa(svg_xml);varimg=newImage();img.width=730;img.height=300;img.onload=function(){varcanvas=document.create(

javascript - 绘制到 HTML 5 Canvas 的最快方法是什么?

我正在研究仅使用HTML的Canvas作为显示媒体制作游戏的可能性。以我需要完成的示例任务为例,我需要从多个等距图block构建游戏环境。当然,在2D中工作意味着它们必须采用矩形包装,因此图block之间有很大的重叠。我已经足够大了,这个问题的自然解决方案是调用BitBltMasked。哦等等,不,HTMLCanvas没有像BitBlt这样简单和令人愉悦的东西。似乎将像素数据转储到Canvas中的唯一方法是使用没有忽略alphachannel的有用绘图模式的drawImage()或使用在数组中具有图像数据的ImageData对象。使用权。是。界限。检查。和。所以。狗。慢。好吧,这与其说

javascript - "Undo"用于编写文本的 Canvas 转换

当使用Canvas应用转换时,生成的文本也(显然)被转换。有没有办法防止某些影响文本的转换,例如反射?例如,我设置了一个全局变换矩阵,使Y轴指向上方,X轴指向右侧,(0,0)点位于屏幕中心(您对数学坐标系的期望)。但是,这也会使文本颠倒。constsize=200;constcanvas=document.getElementsByTagName('canvas')[0]canvas.width=canvas.height=size;constctx=canvas.getContext('2d');ctx.setTransform(1,0,0,-1,size/2,size/2);con