草庐IT

canvas-wrapper-with-gettransform

全部标签

javascript - 初级 JavaScript : Working with JSON and Objects in JavaScript

我有一些像这个“产品”一样返回给浏览器的JSON:{"Title":"SchoolBag","Image":"/images/school-bag.jpg"}我希望此数据成为“产品”对象,因此我可以使用原型(prototype)方法,如返回产品的HTML图像表示的toHTMLImage():functionProduct(){}Product.prototype.toHTMLImage=function(){//Returnssomethinglike"alt=""/>}如何将我的JSON结果转换为Product对象,以便我可以使用toHTMLImage?

javascript - 如何使用 require.js 加载 jQuery with noConflict

我正在尝试使用require在noConflict模式下加载jqueryrequire.config({paths:{'jquery':'libs/jquery-req',underscore:'libs/underscore',backbone:'libs/backbone'},shim:{jquery:{init:function(){console.log('jqinit');varjq=this.jQuery.noConflict(true);jq.support.cors=true;returnjq;},exports:'$'},backbone:{deps:['unders

javascript - 具有 "feather"边缘效果的 Canvas 裁剪

我目前正在将图像绘制到HTML5Canvas并用弧线对其进行mask,在绘制图像之前调用clip()以便仅显示弧线中的部分。我怎样才能羽化这条弧线的边缘?我通过谷歌搜索知道没有简单的方法可以简单地将“羽毛”应用于用Canvas绘制的形状。在边缘接触圆弧的图像的像素数据上要做什么?感谢您的帮助。这是我的代码的相关部分:ctx.arc(canvas.width/2,canvas.height/2,250,0,6.28,false);//drawthecirclectx.restore();ctx.save();ctx.drawImage(background,0,0,background.

javascript - 当我在 Canvas 上单击并拖动鼠标时,光标会变为文本选择光标。我怎样才能防止这种情况发生?

这是一个fiddle:http://jsfiddle.net/MZ9Xm/注意:以下情况出现在Chrome22.0.1221.1中,但不会出现在Firefox14.0.1中。[UbuntuLinux]将鼠标移至顶部Canvas并按住鼠标按钮。拖动鼠标,光标将变为文本选择鼠标光标(I-bar)。如果页面上没有其他元素,则不会发生这种情况。我曾尝试将用户选择设置为无,但运气不佳。 最佳答案 您可以在Canvas中绑定(bind)mousedown事件以防止默认行为。类似于://withjQuery$("#canvasId").mouse

javascript - 错误 : $injector:modulerr Module Error with ui-router

我不知道是什么问题div#wrapper(ng-app="adminApp")....js/varadminApp=angular.module('adminApp',['ui-router']);如果我用varadminApp=angular.module('adminApp',[]);错误消失这是为什么?更新:从控制台添加图片 最佳答案 模块名称是ui-router但你需要注入(inject)ui.router而不是ui-routervaradminApp=angular.module('adminApp',['ui.route

javascript - Mobile Safari 渲染 <img src ="data:image/jpeg;base64..."> 在 Canvas 上缩放?

我尝试在iOS6上的SafariMobile上的Canvas上渲染加载了FileReader对象的本地镜像。但是每个带有数据URL的图像都会被垂直缩放。这是一个错误吗?在Chrome上它可以正确呈现。DemoScriptScreenShotfromiOS6(上图:Canvas,下图:原始图像)有什么办法可以解决这个问题吗?这是错误吗?如果我首先使用“PhotoWizard”应用程序在设备上调整图像大小(将其缩小到720像素宽度),Canvas会正确渲染它。这似乎是图像大小或使用相机应用程序拍摄的图像的问题:WorkingDemoScript尝试了来自JakeArchibald的建议,看

javascript - 拉斐尔-JS : Rect with one round corner

paper.rect(0,0,settings.width,settings.height,settings.radius);创建一个带有圆Angular的漂亮矩形。是否可以创建一个只有一个圆Angular的矩形? 最佳答案 如果你使用RaphaelJS:Raphael.fn.roundedRectangle=function(x,y,w,h,r1,r2,r3,r4){vararray=[];array=array.concat(["M",x,r1+y,"Q",x,y,x+r1,y]);//Aarray=array.concat([

javascript - 如何在 JavaScript 中使用 array reduce with condition?

所以我有一个数组constrecords=[{value:24,gender:"BOYS"},{value:42,gender:"BOYS"},{value:85,gender:"GIRLS"},{value:12,gender:"GIRLS"},{value:10,gender:"BOYS"}]我想得到sum所以我使用了JavaScriptarrayreduce函数并得到了它。这是我的代码:someFunction(){returnrecords.reduce(function(sum,record){returnsum+record.value;},0);}通过该代码,我得到了正确

javascript - HTML5 Canvas TextBaseline Top 在 Firefox 和 chrome 中看起来不同

在canvas中,当将textBaseline属性设置为'top'时,它在chrome和firefox中的呈现方式不同。在chrome中,线条和文本之间存在间隙,而在firefox中没有间隙。请引用this在您的浏览器中查看,任何帮助将不胜感激。我还检查了similarissue报长回。firefox中是否有任何解决方法可以使其正常工作? 最佳答案 我同意OP的观点,这是一个问题,而且它是Firefox特有的。不过,似乎Firefox已经逐渐调整了垂直偏移。它曾经是大约4个像素,然后是3个。现在,它几乎察觉不到。所以,我同意上面@K

javascript - 背景 Canvas 与常规 Canvas 的性能

不久前,webkit(以及Safari)开始支持元素的CSSCanvas背景(来源:http://www.webkit.org/blog/176/css-canvas-drawing/)。这可以大大简化游戏和多媒体的创建,因为您不需要将Canvas标签注入(inject)DIV(例如),而只需直接挂接到DIV的背景即可。也许是这样的:vartarget=document.getElementById("gameview");varwd=target.clientWidth;varhd=target.clientHeight;varcontext=document.getCSSCanva