[推荐]实在受不了canvas的语法了！我要让他支持链式语法!
2013.08.28更新:
此次更新是修复上一次更新的遗留问题,即"有返回值的函数无法得到正确的返回值",比如getImageData,isPointInPath等,这个问题是因为为了实现链式语法,函数会总是返回this.其实要修复这个问题是很简单的,就是判断函数执行后是否有返回值,有的话就返回这个返回值,没有就继续返回this(大多数情况下都没有).
不过由于这个判断的原因,可能会对整体效率有那么一点点的影响;另外,在使用有返回值的函数后,后续就不能继续链式语法了.
另外我把原来的用来放函数名的数组变成了一个字符串,因为这样可以少写很多引号.
var 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); }; }()
先来看一段正常的canvas画图语法：
ctx.arc(centerX,centerY,radius,0,PI*2,true); ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = "10"; ctx.fill(); ctx.beginPath(); ctx.shadowColor = 'rgba(0,0,0,0)'; ctx.moveTo(centerX-radius,centerY); ctx.lineTo(centerX-radius,centerY - 50); ctx.lineTo(centerX+radius,centerY - 50); ctx.lineTo(centerX+radius,centerY); // ctx.lineTo(centerX-radius,centerY); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,1)'; ctx.arc(centerX,centerY-50,radius,0,PI*2,true); ctx.fill();
我对canvas原生语法不爽的有两点：1是每句前面都有写ctx(即canvas的context2d对象），2是每个函数或属性都要占一行，浪费空间。
我对jQuery的链式语法很欣赏，比如：
$('#div1').show(300).html(p).delay(3000).slideUp(300).remove();
所以，我也想用这种语法来进行canvas绘图：
ctx.moveTo(500,0).lineTo(500,500).strokeStyle('#f00').stroke();
有个办法就是模拟一个context2d对象，这个对象支持所有的原生context2d方法，但又支持链式。
不过，代码不能太多，多了就没人喜欢用了。
下面就是完整的代码段，这个“类”我取名为XtendCanvas(又是以X开头的哟)：
// 让canvas支持链式语法，来自十年灯 ~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', 'isPointInPath', 'measureText', 'clearShadow', 'fillText', 'strokeText', 'strokeRect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createImageData', 'getImageData', 'lineWidth','strokeStyle','globalAlpha','fillStyle','font','shadowOffsetX','shadowOffsetY','shadowBlur','shadowColor','lineCap','lineJoin','miterLimit']; function XtendCanvas (canvas) { var ctx = canvas.getContext('2d'), fn = function(){}, fnP = fn.prototype; for(var j = 0,p=pro[0];p;p=pro[j++]) { fn.prototype[p] = function (p) { return function () { var args = Array.prototype.slice.call(arguments); // console.log(args); if(typeof ctx[p] == 'function') { ctx[p].apply(ctx,args); } else { ctx[p] = args+''; } return fnP; }; }(p); } return new fn; }; window.XtendCanvas = XtendCanvas; }();
使用方法很简单，给他传一个canvas对象，他就会返回一个类似context2d的对象，你可以像普通的context2d一样使用，但不同的是，他支持链式语法了：
var cvs = document.getElementById('cvs');
var ctx = XtendCanvas(cvs);
ctx.moveTo(500,0).lineTo(500,500).strokeStyle('#f00').stroke();
这样一来你就可以把所有操作都放在一句话里，你也可以随时中断，做其他的事，然后继续。
2013/1/5更新了下：
var 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', 'isPointInPath', 'measureText', 'clearShadow', 'fillText', 'strokeText', 'strokeRect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createImageData', 'getImageData', 'lineWidth','strokeStyle','globalAlpha','fillStyle','font','shadowOffsetX','shadowOffsetY','shadowBlur','shadowColor','lineCap','lineJoin','miterLimit']; function fn (canvas) { this.context = canvas.getContext('2d'); } var fnP = fn.prototype, Slice = Array.prototype.slice; for(var j = 0,p=pro[0];p;p=pro[j++]) { fnP[p] = function (p) { return function () { var args = Slice.call(arguments), ctx = this.context; // console.log(args); if(typeof ctx[p] === 'function') { ctx[p].apply(ctx,args); } else { ctx[p] = args+''; } return this; }; }(p); } return function (canvas) { return new fn(canvas); }; }()
这个更新只是理了一下语法结构。
由于没有经过极限测试，所以我也暂时不清楚此链式语法会不会在极端情况下造成效率问题。现在已经发现的问题是，用原生代码与用链式语法代码实现相同的效果时，链式语法的浏览器内存会在短时间内一直增长，但一会儿就达到峰值了不再增加；而原生代码内存是缓慢增加，峰值与链式代码差别不大。希望有条件的同学自行测试
-------------更新内容结束------------
这段代码并不是对canvas的增强，只是单纯的让他支持链式语法了。但胜在代码少，可以嵌入到任何JS库中，在此我希望能得到你的一个“推荐”
代码中肯定有值得改进的地方，大家可以自行完善。但——吃水不忘挖井人，希望大家记得我，最重要的是思路，对吧？下面就是思路：
大家可以看到，代码中最长的部分，是那个保存方法名的数组pro，核心代码反而很短。为什么我要建这么一个数组呢？
本来我也想直接从CanvasRenderingContext2D继承所有原生方法，但每个浏览器下面遍历这个CanvasRenderingContext2D，结果都不一致。如果我把他们直接继承，那么当你想用chrome中的方法套在firefox里执行，就会报错。
所以我只是把CanvasRenderingContext2D中的通用的，无异议的方法与属性名提取了出来，没办法，只有建一个固定的数组——大家可以自行决定往里面添加你的方法。
方法与属性提取出来了，接着就是把原生的方法加在我的新对象上。我建了一个叫fn的空函数，放置我的方法。
由于数组中的这些元素既有函数，也有属性，所以我在循环中判断了他是否是一个函数，如果是函数，就带参数执行；不是函数——那么就肯定是属性了，就把参数赋给这个属性。
这样大家在碰到设置canvas属性的时候，就不用中断链了，直接把属性值当参数传进去就行了，比如：
ctx.strokeStyle('#f00')
最后，关键的关键，就是返回fn，这招是从jQuery学来的，是支持链式语法的关键。
这段中用到了匿名函数，闭包，原型，以及我以前文章讲过的奇怪的for循环。
说起来好像挺简单的，不过我实在是想了很久，希望对大家有用。
在写代码的过程中，我发现chrome的做法很不错，他有一串以set开头的函数，如setStrokeColor,setLineCap等函数，给他们传参数，就可以替代对应的strokeStyle和lineCap等属性，也就是说，他的canvas里面就全是函数而没有属性了那样的话我就不用判断是函数还是是属性了。但firefox里面没有这些，所以我还是只能用前面的思路。
我也把那一串set函数给放出来吧：
var bak = ['setTransform','setAlpha', 'setCompositeOperation', 'setLineWidth', 'setLineCap', 'setLineJoin', 'setMiterLimit', 'setLineDash','setShadow','setStrokeColor','setFillColor'];
他们的用处一看就懂。你也可以选择一些加入前面代码的pro数组中。
最后，我很奇怪我的代码怎么会没有高亮了。。。如果你都看到最后了，那么还是给个推荐吧，让我也虚荣一把
