In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-02-27 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
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.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.