How to use lightweight drawing tool Rough js

How to use the lightweight drawing tool Rough js, aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Roughjs is a lightweight JavaScript graphics library (compressed about 9KB) that allows you to draw sketch-style, hand-drawn graphics on the web. Roughjs defines the entities that draw lines, curves, arcs, polygons, circles and ellipses, and it also supports drawing SVG paths.

Rough.js installation

Npminstall--saveroughjs

Use

Constrc=rough.canvas (document.getElementById ('canvas'))

Rc.rectangle (1010200200); / / xrecoery yjournal widthdepartment height

OrSVG

Constrc=rough.svg (svg)

Letnode=rc.rectangle (1010200200); / / xrecoery yjournal widthdepartment height

Svg.appendChild (node)

Rough.js is one of the latest libraries worth testing.

Moreover, the final result has a gorgeous hand-drawn effect.

You can build custom icons, bar charts, and almost everything you want in your code.

However, this proves that the Web standard is developing rapidly, and we are entering an era in which such problems may occur.

At the time of this writing, Rough.js is still in v0.1beta, so it may not be ready for a real-time production Web site.

It uses SVG lines with predefined patterns to create a wobble that looks really natural.

If you click the start button, you will notice that it is running a custom animation and does look hand-drawn.

Take the progress bar generated through Rough.js as an example.

Rough.js hand-drawn style JavaScript graphics

On the GitHub home page, you will find a section that lists many examples of running Rough.js.

All you need is a Rough.js script file, and you need to be patient with JavaScript.

All of these come with code examples that should be very easy to rework for any website.

This is a sample snippet that demonstrates how to create a rectangle in your code:

Varrough=newRoughCanvas (document.getElementById ('myCanvas'), 400200)

Rough.rectangle (1010200200); / / xrecoery yjournal widthdepartment height

Once you understand the code, this will be very simple, but it may not be the most intuitive script for beginners.

This is an ideal place to start learning and find code snippets that can be redone.

This is the answer to the question about how to use the lightweight drawing tool Rough js. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.