Rough.js, a hand-drawn style graphics library for Canvas-H5 Tutorial-php.cn

Rough.js, a hand-drawn style graphics library for Canvas

php中世界最好的语言

Release： 2018-03-20 13:21:57

Original

2732 people have browsed it

This time I bring you Canvas' hand-drawn style graphics library Rough.js. What are the precautions when using Canvas' hand-drawn style graphics library Rough.js. Here are practical cases. Let's take a look. .

Preface

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

Rough.js

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 also supports drawing SVG paths.

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

Installation

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

NPM

npm install --save roughjs

Copy after login

How to use

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

Copy after login

Lines and ellipses

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

Copy after login

fill

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.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
});

Copy after login

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

Copy after login

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

Copy after login

Simple SVG path

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 about it.

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!