Rough.jsがCanvasとSVGを使って手描きのグラフィックを作る

ウェブがどこまで来たのか見るのは素晴らしいことです 動的要素 といった ブラウザ内SVG. あなたはからすべてを設計することができます カスタムアニメーション に HTML5ゲーム 適切なライブラリを使って.

テストに値する最新のライブラリの1つは Rough.js. それは 無料のグラフィック生成スクリプト 現在ベータ版です キャンバスとSVG要素で動作します.

あなたはカスタムアイコン、棒グラフ、あなたがコードで欲しいもの全てを作ることができます。そして、最終結果 ゴージャスな手描きの感じを引き受けます.

これを書いている時点では、Rough.jsはまだv0.1ベータ版なので、 本番ウェブサイトの準備ができていない可能性があります. しかしそれはその証拠です Web標準は急速に進歩しています そして私達はこの種のものが可能な時代に入っています.

例えばこれを取りなさい プログレスバー Rough.jsを通じて生成されます。をクリックすると “開始” あなたはそれに気づくでしょうボタン カスタムアニメーションを実行します それ 本当に手描きに見えます. 使っている 事前定義パターンを持つSVGライン 本当に自然に見えるぐらつき効果を作成する.

GitHubのメインページには、セクションの一覧があります。 動作中のRough.jsの多くの例.

これらすべて コードサンプルが付属しています そしてあるべき どんなウェブサイトでも作り直すのはとても簡単. 必要なのはRough.jsスクリプトファイルとJavaScriptを台無しにするための忍耐力だけです。.

これが サンプルスニペット 方法を示す コードで長方形を作成する：

 var rough = new RoughCanvas（document.getElementById（ 'myCanvas'）、400、200）; rough.rectangle（10、10、200、200）; // x、y、幅、高さ 

コードを理解すれば非常に簡単ですが、おそらく初心者にとって最も直感的なスクリプトではありません。.

より多くのコードスニペットとサンプルデモが必要な場合 Rough.jsのホームページをチェックしてください。. これは、学習を開始し、手直しができるコードスニペットを見つけるのに最適な場所です。.

また、追加機能について質問や提案がある場合は、Twitter @preetsterでRough.js作成者にメッセージを送ることができます。.