软件简介

HTML Canvas API that works in form of tranditional jQuery chains. IE
compatibility will require excanvas JS file (available at ExCanvas
project), but in FF, Safari, etc, the plugin will work as is.

Plugin is allows for flexible positioning of the canvas HTML tag. Modes
over and under (default) will wrap current contents of the box before
attaching the canvas, while unshift and push will either prepend or
append the newly created canvas tag.

Internally, calling canvas() on a jQuery selector will attach an object
containg canvas context, dimensions, and all functions to each DOM element
found by the selector, which facilitates jQuery chains.

The syntax in plugin functions is taken directly from Apple canvas
reference , however, some jQuery-like syntax is used. Coordinates are passed
as arrays, and setup as hash arrays. Each operation may take a separate
style hash array which will use a style for the current operation. Styles
are remembered.

Since the implementation of the API is partial, you can use .canvasraw(
callback) to get raw access to the context. You might want to do this with
gradients since there are no functions for this in the plugin.

Finally, .canvasinfo( list) will populate the passed list with information
for each element in the selector, like width , height , $tag
(canvas tag), context (canvas context). In practice, width and height are
the two most important parameters in dynamic drawing.

Short description of coding using the plugin

The below code will attach HTML Canvas tags to all elements in the selector,
extract context (initializes VML in IE), and prepares internal canvas object
for the later chain

$( '.box').canvas();

Here’s how you draw an arc using the chain. Use use the same selector, but
this time canvas has already been initialized:

$( '.box') .arc( [ 150, 100], { 'radius': 50, 'startAngle': 0, 'endAngle': 360}, { 'strokeStyle' : 'rgba( 183, 204, 79, 0)', 'fillStyle' : 'rgba( 183, 204, 79, 0.4)', 'lineWidth' : 5 } ) .fill();

Here ‘s a more complex example using canvas dimensions obtained using
.canvasinfo()

var info = []; // will get populated with info $( '.box').canvasinfo( info); // info[ 0].width point to the width $( '.box') .style({ 'fillStyle' : 'rgba( 79, 120, 204, 0.4)', 'strokeStyle' : 'rgba( 79, 120, 204, 0.8)', 'lineWidth' : 10 }) .beginPath() .moveTo( [info[ 0].width, 0]) .lineTo( [ info[ 0].width / 2, info[ 0].height / 2]) .lineTo( [ info[ 0].width, info[ 0].height]) .closePath() .stroke() .fill();

Here’s an extension to traditional canvas using .polygon function which
can create a sequence of canvas opertaions under the same style and a simpler
overall setup:

$( '.box').polygon( [ 0, 50], [ [ 'lineTo', [ 50, 10] ], [ 'lineTo', [ 100, 50] ], [ 'quadraticCurveTo', [ 150, 0], [ 150, 50]], [ 'moveTo', [ 150, 100]], [ 'moveTo', [ 0, 100]], [ 'moveTo', [ 0, 50]] ], { 'fill': true, 'stroke': true, 'close': false}, { 'strokeStyle' : 'rgba( 204, 100, 79, 0.5)', 'fillStyle' : 'rgba( 204, 100, 79, 0.1)', 'lineWidth' : 5 } );

When your page is dynamic and you do not need it any more, you can
.uncanvas() as in the below example:

$( '.box').each( function() { $( this).click( function() { $( this).uncanvas(); }); });

Enjoy.