canvasブラシ機能Signature Pad

canvasブラシ機能Signature Pad
Signature Padの紹介
Signature Padは、スムーズな署名を描くJavaScriptライブラリです.HTML 5キャンバスに基づいています.これはすべての現代のデスクトップとモバイルブラウザに適用され、外部ライブラリに依存しない署名プラグインであり、主流のブラウザとモバイル端末と互換性があり、描画曲線はかなり滑らかである.かなり実用的なインタフェースを提供する.体積が小さく、依存性がなく、MITプロトコルに従います.これはGitHubアドレスsignatureです.pad
signature_padメソッド

var canvas = document.querySelector("canvas");
//                     
var signaturePad = new SignaturePad(canvas);

//     PNG     ,        ,         
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

//          .       ,     
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

//       ,    
signaturePad.clear();

//         .  Boolean  
signaturePad.isEmpty();

//           ,       
signaturePad.off();

//     ,     ,  off()  
signaturePad.on();

属性構成アイテム

dotSize   default = (minWidth + maxWidth/2)
//number   (    ),          ,       dotSize  
//    , input      string, dotSize    ,    input      ,   number,          ,         .
minWidth default  0.5
number     
maxWidth default  2.5
number     
throttle default 16
number       ,      ,   
backgroundColor default null
     ,    green    ,#FFFFFF  rgb(0,0,0)  
penColor default #000000
    ,    green    ,#FFFFFF  rgb(0,0,0)  
velocityFilterWeight default 0.7
number                  
onBegin 
    ,       
onEnd
    ,       

使用方法

var signaturePad = new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});
//        
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";