当前位置：首页 > 网页特效 > canvas

基于HTML5 Canvas的EAN13条形码生成插件

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

简介

如果你需要将该EAN13条形码插件作为jQuery插件来使用，那么需要在页面中引入jQuery和jquery-ean13.min.js文件。

```html
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery-ean13.min.js"></script>
```
要通过纯JavaScript来调用该EAN13条形码，需要在页面中引入ean13.min.js文件。

```html
<script type="text/javascript" src="dist/ean13.min.js"></script>    
```            
#####  HTML结构
要制作一个EAN13条形码需要在页面上添加一个canvas元素。

```html
<canvas id="ean" width="400" height="200"></canvas>   
```            
如果你想修改EAN13条形码的大小，只需要设置canvas元素的宽度和高度即可。

#####  调用插件
下面的方法会显示不带任何参数选项的最基本的EAN13条形码：

##### JavaScript：

```html
var element = document.getElementById("ean");
new EAN13(element, "9002236311036");               
jQuery：

$("#ean").EAN13("9002236311036");      
```          
#####  配置参数
该EAN13条形码插件提供了一些可用的配置参数和回调函数，要使用它们，可以简单的在初始化插件的时候在第二个参数中提供一个参数对象。例如：

##### JavaScript：

```html
var options = {
    number: false,
    prefix: false,
    onSuccess: function(){
      alert("Heeeey!");
    }
}
 
new EAN13(document.getElementById("ean"), "9002236311036", options);      ```          
##### jQuery：
```html
$("#ean").EAN13("9002236311036", {
    number: false,
    prefix: false
});                
```
|  参数 | 类型  |  默认值 | 描述  |
| ------------ | ------------ | ------------ | ------------ |
|number|boolean|true|如果设置为true，那么数字会以可读的方式显示在条形码的下方|
|prefix|boolean|true|如果设置为true，国家前缀（确切地来说，它的第一个数字）会被打印在条形码的左边|
|color|string|#000|条形码的颜色，接收任何CSS颜色：#ff0000, green, rgb(0,0,0) 或 rgb(0,0,0,0.5)|
|background|string|null|条形码的背景色，接收任何CSS颜色：#ff0000, green, rgb(0,0,0) 或 rgb(0,0,0,0.5)，默认值null=transparent|
|debug|boolean|false|如果设置为true，条形码上会被绘制某种模式，以用于识别线条|
|padding|int|0|在条形码间添加一些padding值，单位为像素|

##### 回调函数 
| 回调函数  |描述   |
| ------------ | ------------ |
|onValid|当提供的代码校验和是正确的时候触发，如果没有提供12位的校验码则不会触发|
|onInvalid|当提供的代码校验和是不正确的时候触发，如果没有提供12位的校验码则不会触发|
|onSuccess|在条形码绘制结束并且没有错误发生的时候触发|
|onError|在绘制条形码过程中发生错误时触发|

web299.com

基于HTML5 Canvas的EAN13条形码生成插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果