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.
Access2003数据库开发典型范例
王樵民 / 第1版 (2006年8月1日) / 2006-8 / 42.00元
Access数据库管理软件是一套集数据管理、程序开发功能于一体的高级办公软件，是特别适合普通办公人员进行日常工作的有力助手。本书面向非计算机专业人员，通过多个实例讲解Access中的各种开发技术，介绍实际工作过程中应用软件的编制方法，以及与Excel等软件之间的信息互用技术等内容。能够帮助读者快速掌握Access数据库的开发技术，构建解决自己工作中实际问题的数据库管理系统，从而提高办公效率。一起来看看 《Access2003数据库开发典型范例》 这本书的介绍吧!
