目录
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