先来看一段正常的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) {
