本广告位招商中！联系邮箱heiqu8#163.com,将#替换为@...

让canvas支持jQuery式的链式语法

这里的canvas是指html5 中的canvas,如有雷同，恕不解释。

文章更新：

2013.08.28:

此次更新是修复上一次更新的遗留问题,即”有返回值的函数无法得到正确的返回值”,比如getImageData,isPointInPath等,这个问题是因为为了实现链式语法,函数会总是返回this.其实要修复这个问题是很简单的,就是判断函数执行后是否有返回值,有的话就返回这个返回值,没有就继续返回this(大多数情况下都没有).

不过由于这个判断的原因,可能会对整体效率有那么一点点的影响;而且,有返回值的函数的后面,不能继续链式语法.

另外我把原来的用来放函数名的数组变成了一个字符串,因为这样可以少写很多引号.

12345678910111213141516171819202122var XtendCanvas = function () {    var pro = 'save,restore,scale,rotate,translate,transform,createLinearGradient,createRadialGradient,getLineDash,clearRect,fillRect,beginPath,closePath,moveTo,lineTo,quadraticCurveTo,bezierCurveTo,arcTo,rect,arc,fill,stroke,clip,clearShadow,fillText,strokeText,strokeRect,drawImage,drawImageFromRect,putImageData,createPattern,createImageData,textBaseLine,strokeStyle,lineWidth,globalAlpha,fillStyle,font,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,lineCap,lineJoin,miterLimit,getImageData,isPointInPath'.split(',');    function fn (canvas) {        this.context = canvas.getContext('2d');    }    var old = document.createElement('CANVAS').getContext('2d');    for(var i = 1,p=pro[0];p;p=pro[i++]) {        // console.log(i +' >> '+ p + ' >> ' + typeof CanvasRenderingContext2D.prototype[p]);        fn.prototype[p] = function  (p) {             return (typeof old[p] === 'function') ? function  () {                    var r = this.context[p].apply(this.context,arguments);                    return r === undefined ? this : r;                } : function  () {                    this.context[p] = Array.prototype.join.call(arguments);                    return this;                };        }(p);    }      return function  (canvas) {        return new fn(canvas);    };   }()

2013.03.19:

优化了XtendCanvas结构，数组中去掉了一些没必要存在的函数（如isPointInPath），修复了Firefox下报错的问题，并尽量减少了判断与循环的次数：

123456789101112131415161718192021222324var XtendCanvas = function () {    var pro = ['save','restore', 'scale', 'rotate', 'translate', 'transform',  'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'arcTo', 'rect', 'arc', 'fill', 'stroke', 'clip',  'measureText', 'clearShadow', 'fillText', 'strokeText',   'strokeRect', 'drawImage', 'drawImageFromRect',  'putImageData', 'createPattern', 'createImageData', 'getImageData','textBaseLine','strokeStyle','lineWidth','globalAlpha','fillStyle','font','shadowOffsetX','shadowOffsetY','shadowBlur','shadowColor','lineCap','lineJoin','miterLimit'];    function fn (canvas) {        this.context = canvas.getContext('2d');    }    var old = document.createElement('CANVAS').getContext('2d');    for(var i = 1,p=pro[0];p;p=pro[i++]) {        // console.log(i +' >> '+ p + ' >> ' + typeof CanvasRenderingContext2D.prototype[p]);        fn.prototype[p] = function  (p) {             return (typeof old[p] === 'function') ? function  () {                    this.context[p].apply(this.context,arguments);                    return this;                } : function  () {                    this.context[p] = Array.prototype.join.call(arguments);                    return this;                };        }(p);    }      old = null;    return function  (canvas) {        return new fn(canvas);    };    }()