Rough. js and canvasrough. js hand-drawn style Graphics Library Based on Canvas

Rough. js and canvasrough. js hand-drawn style Graphics Library Based on Canvas

Preface

We recommend a Canvas-based JS library for hand-drawn graphics.

Rough. js

Rough. js is a lightweight (about 8 k) library that can draw a Rough hand-drawn style Library Based on Canvas.

Provides basic capabilities for drawing lines, curves, arcs, polygon, circles, and ovans, and supports drawing SVG paths.

Github: https://github.com/pshihn/rough

Install

Download link: https://github.com/pshihn/rough/tree/master/dist

NPM

npm install --save roughjs

Usage

const rc = rough.canvas(document.getElementById('canvas'));rc.rectangle(10, 10, 200, 200); // x, y, width, height

Line and ellipse

rc.circle(80, 120, 50); // centerX, centerY, diameterrc.ellipse(300, 100, 150, 80); // centerX, centerY, width, heightrc.line(80, 120, 300, 100); // x1, y1, x2, y2

Fill

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachurerc.rectangle(120, 15, 80, 80, { fill: 'red' });rc.circle(50, 150, 80, {  fill: "rgb(10,150,10)",  fillWeight: 3 // thicker lines for hachure});rc.rectangle(220, 15, 80, 80, {  fill: 'red',  hachureAngle: 60, // angle of hachure,  hachureGap: 8});rc.rectangle(120, 105, 80, 80, {  fill: 'rgba(255,0,200,0.2)',  fillStyle: 'solid' // solid fill});

Sketch Style

rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG path

rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });

Simple SVG path

Combined with Web Workers

If the Web Workers library "import Workly" is available on the webpage, RoughJS automatically transfers all operations to web workers to release the main UI thread. This is useful when you use RoughJS to create complex maps (such as maps. Read more.

<script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js"></script><script src="../../dist/rough.min.js"></script>

Example

Https://github.com/pshihn/rough/wiki/Examples

API and documentation

Https://github.com/pshihn/rough/wiki

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.