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

Let’s first look at a normal canvas drawing syntax:

Copy the code

The code is as follows:

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

I am not happy with the native canvas syntax There are two points: 1. Each sentence is preceded by ctx (that is, the context2d object of canvas), and 2. Each function or attribute takes up one line, which is a waste of space.

I really appreciate jQuery’s chain syntax, such as:

Copy code

The code is as follows:

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

Therefore, I also want to use this syntax for canvas drawing:

Copy the code

The code is as follows:

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

One way is to simulate a context2d object, this The object supports all native context2d methods, but also supports chaining.

However, you can’t have too much code, otherwise no one will like to use it.

The following is the complete code snippet. I named this "class" XtendCanvas (it starts with X again):

Copy the code

The code is as follows:

// 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:

Copy code

Code As follows:var cvs = document.getElementById('cvs');

var ctx = XtendCanvas(cvs);

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

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:

Copy code

The code is as follows:

ctx.strokeStyle('#f00')

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:

Copy code

The code is as follows:

var bak = ['setTransform','setAlpha', 'setCompositeOperation', 'setLineWidth', 'setLineCap', 'setLineJoin', 'setMiterLimit', 'setLineDash ','setShadow','setStrokeColor','setFillColor'];

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.