画笔工具：铅笔、直线、矩形、圆形、箭头、文

a easy to use drawing board lib

Using npm:

npm install canvas-drawing

Using yarn:

yarn add canvas-drawing

Using script tag

<script src="your_path/dist/canvas-drawing.min.js"></script> Play

live example

or

git clone this repository then open example/index.html in your browser

<script type="text/javascript" src="//{you path to the dist file}/dist/canvas-drawing.min.js"></script> <style>.container { width: 500px; height: 500px; }</style> <div class="container"></div>

// More options are available in the following documents const options = { container: document.getElementsByClassName('container')[0] } /* A canvas has 2 sizes, the dimension of the pixels in the canvas and the display size. canvas's dimension of the pixels is (devicePixelRatio * canvas's display size) by default. canvas's display size equals container's size (width/height) */ const draw = new canvasDrawing(options); Options

coords it will return canvas's coords (x, y) and Mouse's coords (clientX, clientY)

import CanvasDrawing from 'canvas-drawing' const draw = new CanvasDrawing({container: Dom}) draw.evt.on('drawBegin', function(coords) { console.log('begin', coords); }) drawing

draw.evt.on('drawing', function(coords) { console.log('drawing', coords); }) drawEnd

draw.evt.on('drawEnd', function(coords) { console.log('end', coords); }) removeListeners

draw.evt.off('drawBegin'); draw.evt.off('drawing'); draw.evt.off('drawEnd'); // or draw.evt.removeAllListeners(); Example

// init import CanvasDrawing from 'canvas-drawing' const container = document.getElementsByClassName('container')[0] const draw = new CanvasDrawing({container: container}) // methods draw.conifg('lineColor', '#FF1493') // Change the color of the brush. draw.setMode('rect') // Now you can draw the rectangle. draw.generateBase64().then(data => console.log(data)) // generateBase64 method default is to export the PNG base64 data. draw.generateBase64('jpeg').then(data => console.log(data)) // get smaller data. draw.saveImg() // Save the canvas as an PNG images, and the file name is canvas_imgae.png. draw.saveImg({fileName: '233.png'}) // Just Change of file name. draw.saveImg({tpye: 'jpeg', fileName: 'small.jpeg'}) // Sometimes we just need smaller pictures. License

MIT