Dynamic HTML Canvas Drawing
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/canvas
软件介绍
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.
