github/rough
1
1
Fork 0
mirror of https://github.com/rough-stuff/rough.git synced 2026-02-14 23:45:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Preet
2017-01-13 00:44:23 -08:00
committed by GitHub
parent f043d508b4
commit 9deaf27172
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/README.md
View File

@@ -30,7 +30,10 @@ var rough = new RoughCanvas(document.getElementById('myCanvas'), 400, 200);
rough.rectangle(10, 10, 200, 200); // x, y, width, height
```
### Drawing lines and shapes
### Drawing lines and ellipses
![Rough,js ellipses](https://pshihn.github.io/rough/images/cap_ellipse.png)
``` javascript
rough.circle(80, 120, 50); // centerX, centerY, radius
rough.ellipse(300, 100, 150, 80); // centerX, centerY, radiusX, radiusY
@@ -39,6 +42,8 @@ rough.line(80, 120, 300, 100); // x1, y1, x2, y2
### Filling
![Rough,js fill examples](https://pshihn.github.io/rough/images/cap_fill.png)
``` javascript
rough.fill = "red";
rough.circle(50, 50, 40);
@@ -59,6 +64,8 @@ r3.hachureGap = 8;
### Sketching style
![Rough,js styles examples](https://pshihn.github.io/rough/images/cap_styles.png)
``` javascript
var r1 = rough.rectangle(15,15,80,80);
r1.roughness = 0.5;
@@ -74,6 +81,8 @@ r3.strokeWidth = 3;
### Arcs and Curves
![Rough,js curve](https://pshihn.github.io/rough/images/cap_curve.png)
``` javascript
// arc(centerX, centerY, radiusX, radiusY, startAngle, endAngle, closePath)
var arc1 = rough.arc(200, 100, 200, 180, -Math.PI + (Math.PI / 3), -Math.PI / 2, true);
@@ -83,12 +92,16 @@ var openArc = rough.arc(200, 100, 150, 130, -0.2 * Math.PI, 0.6 * Math.PI, false
openArc.strokeWidth = 10;
```
![Rough,js curve](https://pshihn.github.io/rough/images/cap_curve.png)
``` javascript
var curve = rough.curve([[10, 10], [150, 65], [180, 165], [300, 20], [400, 200]]);
```
### SVG Paths
![Rough,js svg](https://pshihn.github.io/rough/images/cap_svg.png)
``` javascript
var path = rough.path("M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z");
path.fill = "#424242";
@@ -97,6 +110,8 @@ path.hachureAngle = 90;
### Dynamic shapes
![Rough,js animating rectangle](https://pshihn.github.io/rough/images/rect_animation.gif)
``` javascript
var rect = rough.rectangle(10,10,20,100);
var increaseWidth = function() {