Break through the limitations of canvas syntax and let it support chain syntax_html5 tutorial skills

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();

$('#div1').show(300).html(p).delay(3000).slideUp(300).remove();

ctx.moveTo(500,0).lineTo(500,500).strokeStyle('#f00').stroke();

// Let canvas support chain syntax, from Ten Years Light
~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. It can be used like ordinary context2d, but the difference is that it supports chain syntax:

This way you can put all the operations in one sentence, and you can also interrupt at any time, do other things, and then continue.

This code is not an enhancement to canvas, but simply allows it to support chain syntax. But the advantage is that it has less code and can be embedded in any JS library. Here I hope to get a "recommendation" from you

There must be areas worth improving in the code, and everyone can improve it by themselves. But - don’t forget the well-digger when you are drinking water. I hope everyone will remember me. The most important thing is the idea, right? Here is the idea:
As you can see, the longest part of the code is the array pro that stores the method name, while the core code is very short. Why do I need to create such an array?

Originally, I wanted to inherit all native methods directly from CanvasRenderingContext2D, but when traversing this CanvasRenderingContext2D in each browser, the results were inconsistent. If I inherit them directly, then when you want to use the method in Chrome to execute in Firefox, an error will be reported.

So I just extracted the common, unobjectionable methods and property names in CanvasRenderingContext2D. There is no other way but to build a fixed array - you can add your methods to it at your own discretion.

The methods and properties are extracted, and then the native methods are added to my new object. I created an empty function called fn to place my methods.

Since these elements in the array have both functions and attributes, I judged whether it is a function in the loop. If it is a function, it will be executed with parameters; if it is not a function - then it must be an attribute. , assign the parameter to this attribute.

In this way, when you set the canvas attribute, you don’t have to interrupt the chain. You can just pass the attribute value directly as a parameter, for example:


Finally, the key key , which is to return fn. This trick was learned from jQuery and is the key to supporting chain syntax.

Anonymous functions, closures, prototypes, and the strange for loop I talked about in previous articles are used in this paragraph.

It seems quite simple to say, but I really thought about it for a long time. I hope it will be useful to everyone.

In the process of writing code, I found that Chrome has a very good approach. It has a series of functions starting with set, such as setStrokeColor, setLineCap and other functions. By passing parameters to them, they can replace the corresponding strokeStyle and lineCap. Waiting for attributes, that is to say, his canvas is full of functions and no attributes. In that case, I don't have to judge whether it is a function or an attribute. But there is no such thing in firefox, so I can only use the previous idea.

Let me also release the set function:


Their uses are easy to understand at a glance. You can also select some to add to the pro array in the previous code.

Finally, I’m wondering why my code is not highlighted. . . If you have watched it till the end, then you might as well give me a recommendation, so that I can be vain too.