2018年01月9日(火)

Canvasをアナログ手書き風に描画できるJSライブラリ「Rough.js」

• 0
• 43
• 0
• 0

使い方

canvasタグを適当なidでマークアップします。

rectangleで四角、circleで円を描画します。
線の太さだったり塗り線の太さとかも調節できます。

var rough = new RoughCanvas(document.getElementById('rough-canvas'), 800, 500); // 四角 var r1 = rough.rectangle(20, 20, 120, 120); r1.stroke = '#016411'; r1.strokeWidth = 2; r1.fill = '#6add5b'; r1.fillWeight = 2; r1.roughness = 3; // 円 var r2 = rough.circle(250, 80, 60); r2.stroke = 'red'; r2.fill = '#FF6688'; r2.roughness = 2; r2.strokeWidth = 2;