问使用Javascript创建带有漫画风格/手抖动的SVG /画布草图

EN

//STEP 1 -- create shapes, a circle and rectangle in this example

var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.strokeColor = 'white';
myCircle.strokeWidth = 2;

var mySquare =  new Rectangle(new Point(350, 250), new Point(190, 100));
var square = new Path.Rectangle(mySquare);
square.strokeColor = 'white';
square.strokeWidth = 2;

//STEP 2 -- Subdivide the shapes into segments. Parameter here is the max distance we walk along-the-path before adding a new vertex

myCircle.flatten(5);
square.flatten(4);


//STEP 3 -- Loop through the segment points of the path and move each to a random value between 1 and 4

for (var i = 0; i < myCircle.segments.length; i++) { //loop for circle
   myCircle.segments[i].point.x += getRandomInt(1,3);
   myCircle.segments[i].point.y += getRandomInt(1,3);
};

for (var i = 0; i < square.segments.length; i++){ //loop for square
   square.segments[i].point.x += getRandomInt(1,3);
   square.segments[i].point.y += getRandomInt(1,3);
};


//draw the paper view
view.draw();


//Utility function that returns a random integer within a range
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}