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.
码出高效：Java开发手册
杨冠宝、高海慧 / 电子工业出版社 / 2018-10 / 99.00元
《码出高效：Java 开发手册》源于影响了全球250万名开发工程师的《阿里巴巴Java开发手册》，作者静心沉淀，对Java规约的来龙去脉进行了全面而彻底的内容梳理。《码出高效：Java 开发手册》以实战为中心，以新颖的角度全面阐述面向对象理论，逐步深入地探索怎样成为一位优秀开发工程师。比如：如何驾轻就熟地使用各类集合框架；如何得心应手地处理高并发多线程问题；如何顺其自然地写出可读性强、可维护性好的......一起来看看 《码出高效：Java开发手册》 这本书的介绍吧!
