目录
jCanvas是一个jQuery插件，使HTML5画布易于使用。
jCanvas是一个JavaScript库，用jQuery编写并用于jQuery，它包含HTML5 canvas API，添加了新的特性和功能，其中许多是可定义的。功能包括图层、事件、拖放、动画等等。结果是一个灵活的API包含在一个含糖的jQuery-esque语法中，为HTML5画布带来了强大的功能。
特性：
- 用于绘制x形状的灵活API
- 适用于桌面和移动设备
- 小(经gzip后只有12kb)
- 免费和开源
jCanvas
-
Introduction
<canvas>元素是HTML5的一个新元素。它允许你在被称为画布的空白元素上绘制任意形状、路径、图像和其它图形。
创建画布：
<canvas width="300" height="150"></canvas>当然，画布可以设置为任意宽度和高度。还可以为画布提供id，以供将来c参考。
note：无法通过css准确设置画布的宽度和高度，只能通过canvas元素的width和heights属性设置。
导入jCanvas：
<script src="jcanvas.min.js"></script>绘制：
HTML5提供了一个绘制canvas的原生javascript API。a native JavaScript API，但是我们使用jCanvas，使用jCanvas需要了解jQuery的基本知识。
-
Syntax
所有的jCanvas方法都是jQuery常规方法，调用jCanvas方法将应用于jQuery集合中所有canvas元素。
基础用法：
大多数jCanvas方法接受属性映射，可以按照任何顺序列出。
// 在画布上绘制一个圆
$('canvas').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50
});
数字值：
大多数数字属性值都以像素为单位，但有些是相对于其它属性的值。任何属性的描述通常都会在必要时提及这些特殊的情况。
属性链/方法链：
大多数jCanvas方法支持链接以获得更清晰和更快的代码。
$('canvas').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50
})
.drawArc({
fillStyle: '#36b',
x: 300, y: 150,
radius: 50
});
当然也可以在多个画布上绘制相同的图形。
-
Canvas Object
jCanvas包含一个jcanvas对象作为jQuery对象的一部分。
$.jCanvas这个jCanvas对象包含如下属性和方法：
- 默认：包含jCanvas默认属性的对象
- 扩展：一种使用自定义方法扩展jCanvas对象
覆盖jCanvas默认值：
如果希望覆盖任何jCanvas默认属性值，可以显式设置该属性或使用jQuery的$.extend:
$.jCanvas.defaults.fromCenter = false;$.extend($.jCanvas.defaults, {
fromCenter: false,
inDegrees: false
});
-
Extending jCanvas
jCanvas提供了一个插件API，因此可以创建与jCanvas集成的方法。为此，可以使用jCanvas.extend()方法。
extend()方法接受一个包含三个属性的对象：
- name:你正在创建的方法的名称；
- type:可选，绘制d的类型，jCanvas将其识别为type属性的有效值；
- props：可选，你的方法使用的自定义属性(及其默认值)。这些属性将合并到arguments对象中(如下所述)，以便在方法的代码中使用。
- fn:提供插件功能的函数，它接受两个参数：画布的上下文context，调用方法时接受的参数对象
$.jCanvas.extend({
name: 'pluginName',
props: {
prop: true
},
fn: function(ctx, params) {
// Your code here
}
});示例：drawHeart()
为了演示这是如何工作的，我们将创建一个在画布上绘制心脏的方法。
// Create a drawHeart() method
$.jCanvas.extend({
name: 'drawHeart',
type: 'heart',
props: {},
fn: function(ctx, params) {
// Just to keep our lines short
var p = params;
// Enable layer transformations like scale and rotate
$.jCanvas.transformShape(this, ctx, p);
// Draw heart
ctx.beginPath();
ctx.moveTo(p.x, p.y + p.radius);
// Left side of heart
ctx.quadraticCurveTo(
p.x - (p.radius * 2),
p.y - (p.radius * 2),
p.x,
p.y - (p.radius / 1.5)
);
// Right side of heart
ctx.quadraticCurveTo(
p.x + (p.radius * 2),
p.y - (p.radius * 2),
p.x,
p.y + p.radius
);
// Call the detectEvents() function to enable jCanvas events
// Be sure to pass it these arguments, too!
$.jCanvas.detectEvents(this, ctx, p);
// Call the closePath() functions to fill, stroke, and close the path
// This function also enables masking support and events
// It accepts the same arguments as detectEvents()
$.jCanvas.closePath(this, ctx, p);
}
});
// Use the drawHeart() method
$('canvas').drawHeart({
layer: true,
draggable: true,
fillStyle: '#c33',
radius: 50,
x: 150, y: 130,
rotate: 30
});
API方法：
jCanvas对象($.jCanvas)提供了一些将方法与jCanvas集成的有用方法。所有这些方法都接受三个参数：canvas DOM元素(this),canvas上下文(ctx)和参数object(params)。
setGlobalProps():设置全局画布属性，如fillStyle,shadowColor等。
transformShape():使用标准转换属性(旋转，缩放，平移)启用形状z转换。请注意，必须稍后d调用closePath（）方法才能恢复图层转换。
detectEvents():启用并检测自定义路径的jCanvas事件。请注意，应在路径末尾调用此方法。
closePath():关闭当前路径，如果已设置相应的属性。则填充/描边。该方法还允许通过使用mask属性l来屏蔽路径。
setCanvasFont():根据fontStyle,fontStyle和fontFamily属性设置画布上下文的字体。
measureText():使用计算的文本宽度和高度扩充给定的参数对象。接受一个字符串数组(表示文本行)作为第四个参数。
$.jCanvas.detectEvents(this, ctx, params);$.jCanvas.closePath(this, ctx, params);note：调用方法时，jCanvas将自动循环的画布元素，因此您不需要。
这些是每个jCanvas属性，它们支持的方法及其可能值的描述。 首先列出默认属性值。
-
Properties
详情见：jCanvas属性以及支持的方法
-
Methods
这是每个jCanvas方法的参考列表，详情见：jCanvas方法
Canvas
-
Clear Canvas(canvas清除)
clearCanvas()方法清除所有或部分canvas。
如果你使用jCanvas Layer API，则不应使用此方法，因为在许多情况下，如果你尝试清除画布 ，API会为你重新绘制。当你认为必要的时候，你的图层最终会被jCanvas重新绘制。
如果暂时隐藏图层，请使用setLayer()设置图层的visible属性，然后调用drawLayers():
$('canvas').setLayer('myLayerName', {
visible: false // set to true instead to show the layer again
}).drawLayers();如果想要永远地移除一个图层，调用removeLayer()后面跟着drawLayer():
$('canvas').removeLayer('myLayerName').drawLayers();清除所有图层：如果没有传递参数，那么清除所有图层
$('canvas').clearCanvas()
清除一个部分(clear a section):
清除部分的工作与矩阵绘制的方式相同，矩阵从中心绘制(默认情况下)。
$('canvas')
.drawEllipse({
fillStyle: '#000',
x: 200, y: 100,
width: 200, height: 100,
})
.clearCanvas({
x: 200, y: 100,
width: 50,
height: 50
}); 
-
Rotate Canvas(canvas缩放)
- 1旋转画布上下文(context)
rotateCanvas()方法从包含的点旋转画布，x和y属性定义旋转中心。
$('canvas').rotateCanvas({
rotate: 45,
x: 100, y: 100
})
.drawRect({
fillStyle: '#000',
x: 100, y: 100,
width: 100, height: 50
})
.restoreCanvas();
- 2旋转一个单独的形状(an individual shape)
可以旋转单个形状，而不是整个画布
// Rotate this rectangle by 30 degrees
$('canvas').drawRect({
fillStyle: '#c33',
x: 200, y: 100,
width: 150, height: 80,
rotate: 30
}); 
请注意，你可以指定translateX和translateY属性来偏移旋转中心
// Rectangle rotates from its center
$('canvas').drawRect({
fillStyle: '#c33',
x: 150, y: 100,
width: 150, height: 80,
rotate: 30
});
// Rectangle rotates from its top-left corner
$('canvas').drawRect({
fillStyle: '#6c3',
x: 150, y: 100,
width: 150, height: 80,
translateX: 75, // width / 2
translateY: 40, // height / 2
rotate: 30
});
- 3图层(Layer)
尽管看起来有点违反直觉，但rotateCanvas()方法实际上可以绘制图层。这允许在绘制图层时应用画布变换。
要执行此操作，请将layer属性设置为true，就像任何其他形状设置图层一样。此外，就像使用任何其它类型的图层一样，你可以使用name属性为此图层指定名称。
$('canvas').rotateCanvas({
layer: true,
name: 'rotate1'
});但是，无论何时旋转画布，都必须使用restoreCanavs()方法恢复转换。
$('canvas').restoreCanvas({
layer: true
});note：要恢复到画布之前的状态，调用restoreCanvas()方法。但是，旋转单个形状s时无需如此。
-
Scale Canvas(canvas缩放)
- 缩放图层
scaleCanvas()方法从包含的点缩放画布。
$('canvas').scaleCanvas({
x: 100, y: 100,
scaleX: 1.5, scaleY: 3
})
.drawArc({
fillStyle: '#000',
x: 100, y: 100,
radius: 20
})
.restoreCanvas();
- scale property
你还可以用scale属性设置scaleX和scaleY.
$('canvas').scaleCanvas({
scale: 2
})
.drawRect({
fillStyle: '#000',
x: 100, y: 100,
width: 100, height: 50
})
.restoreCanvas(); 
- 缩放单个形状
你可以使用以下三个属性中的任何一个缩放单个形状，而不是缩放整个画布：scale，scaleX或scaleY
// This square is scaled to be a rectangle
$('canvas').drawRect({
fillStyle: '#36c',
x: 200, y: 100,
width: 100, height: 100,
scaleX: 3
}); 
- 图层
尽管看起来有点违反直觉，但scaleCanvas()方法实际上可以绘制为图层。这允许在绘制图层时应用画布变换。
要执行此操作，请将layer属性设置为true,就像将任何其它形状设置为图层一样。此外，就像使用任何t其它类型的图层一样，你可以使用name属性为此图层指定名称。
$('canvas').scaleCanvas({
layer: true,
name: 'scale1'
});当然也需要使用restoreCanvas()方法恢复转换。
$('canvas').restoreCanvas({
layer: true
});note:
scaleX和scaleY值是画布当前宽度/高度的倍数（即1是基线）。
要恢复到画布的先前状态，请调用restoreCanvas（）方法。 但是，在缩放单个形状时，无需调用此方法。
-
Translate Canvas(canvas反转)
反转的几种方式：
$('canvas').translateCanvas({
translateX: 200, translateY: 100
})
.drawRect({
fillStyle: '#000',
x: 50, y: 50,
width: 100, height: 50
})
.restoreCanvas();$('canvas').translateCanvas({
translate: 100
})
.drawRect({
fillStyle: '#000',
x: 100, y: 100,
width: 100, height: 50
})
.restoreCanvas();$('canvas')
.drawRect({
fillStyle: '#474',
x: 50, y: 50,
width: 100, height: 50,
translateX: 200, translateY: 100
});note：平移形状会改变其转换中心。
以图层的方式转换：
$('canvas').translateCanvas({
layer: true,
name: 'translate1'
});$('canvas').restoreCanvas({
layer: true
});-
Pixel Manipulation(像素操作)
setPixes()方法允许从画布修改特定像素部分。要修改像素，可以使用每个回调方法遍历每个像素。每个回调函数都接受两个参数：包括红色，绿色、蓝色和alpha颜色值(r,g,b,a)属性的对象；传递给setPixels()方法的参数。
function invert() {
$(this).setPixels({
x: 150, y: 100,
width: 220, height: 138,
// loop through each pixel
each: function(px) {
px.r = 255 - px.r;
px.g = 255 - px.g;
px.b = 255 - px.b;
}
});
}
$('canvas').drawImage({
source: 'images/fish.jpg',
x: 150, y: 100,
// Invert image color when image loads
load: invert
});在此示例中，将鼠标悬停在图像上，将会操纵最靠近你悬停部分的像素。
function invert(params) {
$(this).setPixels({
x: params.eventX, y: params.eventY,
width: 50, height: 50,
// loop through each pixel
each: function(px) {
px.r = 255 - px.r;
px.g = 255 - px.g;
px.b = 255 - px.b;
}
});
}
$('canvas').drawImage({
layer: true,
source: 'images/fish.jpg',
x: 150, y: 100,
mousemove: invert
});note：如果没有指定width和height属性，该方法会遍历画布上的每个像素。r,g,b和alpha的属性范围都是0-255。与所有jCanvas方法一样，setPixels()方法尊重fromCenter属性值，默认为false。
-
Get Canvas Images(获取canvas图像)
getCanvasImage()方法将画布的图像数据检索为字符串。该字符串时base64编码的图像URL，可以作为任何有效图像的URL。
$('canvas').getCanvasImage();默认是.png格式，也可以设置为其它格式。
$('canvas').getCanvasImage('png');
$('canvas').getCanvasImage('jpeg');设置属性：
$('canvas').getCanvasImage('jpeg', 0.5);note:如果页面是从文件URL（file：//）提供的，则此方法在Google Chrome上无效。 这是Google Chrome沙盒架构的限制，因此无法修复。 但是，当从服务器（在线或通过localhost：//在本地运行）提供页面时，此方法仍然有效。
-
Draw Manually(手动绘制)
使用draw()方法，可以用原生canvas方法任意绘制。
$('canvas').draw({
fn: function(ctx) {
ctx.fillStyle = '#333';
ctx.fillRect(50, 50, 100, 100);
}
});$('canvas').draw({
type: 'rectangle',
fillStyle: '#c33',
x: 100, y: 100,
width: 100, height: 80
});与下面的方法等同：
$('canvas').drawRect({
fillStyle: '#c33',
x: 100, y: 100,
width: 100, height: 80
});-
Detect Pixel Ratio(检测像素比率)
jCanvas提供了detectPixelRatio（）方法，用于检测高分辨率显示器（包括带有视网膜显示器的设备）。
对于这些设备，该方法将增加画布的尺寸宽度和高度，缩放其上下文以匹配，然后使用CSS缩小它。 这将导致设备以更高的像素密度渲染画布。
该方法还接受回调函数作为其唯一参数，而该参数又接受设备的像素比率作为其唯一参数。
$('canvas').detectPixelRatio(function(ratio) {
// Run some code depending on the device pixel ratio
});比如说：Apple设备上的Retina显示器的像素比率为2。
Drawings
参考：jCanvas绘制
Layers
参考：Layers API
Events
参考：Events API
Styles
参考：Styles
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
