github/rough
1
1
Fork 0
mirror of https://github.com/rough-stuff/rough.git synced 2026-04-22 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

chart example

Browse Source
This commit is contained in:
Preet Shihn
2018-03-12 16:06:43 -07:00
parent 908d6dbc16
commit b62b4cba48
8 changed files with 430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/examples/path-example.html Normal file
View File

@@ -0,0 +1,38 @@
<html>
<head>
<title>RoughJS Path Example With Worker</title>
<script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.js"></script>
<script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.min.js"></script>
</head>
<body>
<h2>RoughJS Path Example (Using web workers)</h2>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
(async () => {
const rc = rough.canvas(document.getElementById('canvas'));
await rc.path('M400 100 h 90 v 90 h -90z', {
stroke: 'red',
strokeWidth: '3',
fill: 'rgba(0,0,255,0.2)',
fillStyle: 'solid'
});
await rc.path('M400 250 h 90 v 90 h -90z', {
fill: 'rgba(0,0,255,0.6)'
});
await rc.path('M37,17v15H14V17z M50,0H0v50h50z', {
stroke: 'red',
strokeWidth: '1',
fill: 'blue'
});
await rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
await rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple', hachureAngle: 60, hachureGap: 5 });
await rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
await rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
})();
</script>
</body>
</html>