A brief discussion on Rough.js, a hand-drawn style graphics library based on Canvas

Recommend a hand-drawn style graphic JS library based on Canvas.

Rough.js is a lightweight (about 8k), Canvas-based library that can draw rough hand-drawn styles.

Provides basic capabilities for drawing lines, curves, arcs, polygons, circles and ellipses, and supports drawing SVG paths.

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

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

 npm install --save roughjs

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

 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

 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});

 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 });

 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' });

Combined with Web Workers

If there is the import Workly Web Workers library in the web page, RoughJS will automatically transfer all operations to web workers to release the UI main thread. This is very useful when using RoughJS to create complex drawings (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>

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

API and documentation

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.