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.
Linux内核完全剖析
赵炯 / 机械工业出版社 / 2006-1 / 79.00元
本书对早期Linux操作系统内核全部代友文件进行了详细的剖析，旨在让读者在尽量短的时间内对Linux的工作机理获得全面而深刻的理解，为进一步学习和研究Linux系统打下坚实的基础。虽然选择的版本较低，但该内核已能够正常编译运行，并且其中已包括了Linux工作原理的精髓。书中首先以Linux源代码版本的变迁为主线，简要介绍了Lin-ux系统的发展历史，同时着重说明了各个内核版本之间的主要区别和改进方......一起来看看 《Linux内核完全剖析》 这本书的介绍吧!
