Dynamic HTML Canvas Drawing
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.
-
来显示保存的签名图片。 初始化插件 在页面加载完毕之后使用下面的方法来初始化该签名插件。 配置参数 下面是该签名插件的一些可用参数，这些参数同时也可以在data-attributes上使用： 参数 描述 Data Attribute 示例 Width 签名canvas的宽度，单位像素，默认值300 data-width="600" $().jqSignature({width: 600}); He
-
Let's say this is my canvas, with an evil-looking face drawn on it. I want to use toDataURL() to export my evil face as a PNG; however, the whole canvas is rasterised, including the 'whitespace' betwe
-
WebGL WebGL 是针对 Canvas 的 3D 上下文。与其他 Web 技术不同，WebGL 并不是 W3C 制定的标准，而 是由 Khronos Group 制定的。其官方网站是这样介绍的：“Khronos Group 是一个非盈利的由会员资助的 协会，专注于为并行计算以及各种平台和设备上的图形及动态媒体制定无版税的开放标准。” Khronos Group 也设计了其他图形处理 API，
-
动画与Canvas图形 使用requestAnimationFrame 早期定时动画 早期动画就是使用setInterval()来控制动画的执行 无论是setInterval()还是setTimeout()都是不能保证时间精度的。作为第二个参数的延时只能保证何时将代码添加到任务队列，不能保证添加到队列就会立即执行 时间间隔的问题 浏览器自身计时器会让这个问题雪上加霜，浏览器的计时器精度不足毫秒，以
-
JavaScript 使用Canvas绘图 <canvas>元素负责在页面中设定一个区域，可以通过JavaScript动态地在这区域中绘制图形。 一、基本用法 1、先设置width和height来指定绘图区域大小，默认是透明的。需用getContext()方法获得绘图上下文。 if(drawing.getcontext){ //检测浏览器是否支持canvas元素 var c
-
先简单分析一下原理 对于任意两点 (x1,y1） (x2,y2) 如果斜率存在，y=kx+b k=(y2-y1)/(x2-x1) b=y1-kx1（） 不存在的话，就是垂直的情况 x=m y定义在[y1,y2]上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=
-
本文主要是通过jq实现电子签名，其中ios有一个坑，已修复。基于mui+vue框架实现的，如果使用此框架，稍稍改动代码即可。 1.相关代码 1.1引入jq <script src="jquery-1.11.0.min.js" type="text/javascript"></script> 1.2封装signature.js (function(window, document, $) { '
-
Backward compatible Core nodes: Node, Scene, Director, Sprite. These nodes have improved functionality compared to the V3 ones. For example, Node can redefine is draw method to augment its capabilitie
-
网页制作Webjx文章简介：Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图 应用图像 Using images One of the more fun
-
FlatTintPipeline Updates In 3.11 I overhauled the TextureTintPipeline, the WebGL batch used to render all texture based Game Objects, such as Sprites. In this release I did the same to the FlatTintPip
-
Canvas is an HTML element that allows for dynamic, scriptable rendering of 2D shapes, 3D shapes, bitmap images and animations in both 2D and 3D. The HTML element can be used to draw graphics in JavaSc