2019年06月28日(金)
preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」
Pinker.js
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。
以下動作サンプルです。
動作サンプル
See the Pen dBZVoP by kachibito
(@kachibito) on CodePen.
左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。
使い方
Pinker.jsを読み込みます
preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Rel...
0
2
8
16
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
remove.bg 神アップデート！ネコや犬もサポート、動物や植物や物体などの画像から背景を1クリックで切り抜き
NEXT ›
Wayback Machineに新機能「Changes」が追加。コンテンツの追加と削除の差分が比較可能に
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」』についてまとめています。
この記事は特にjavascriptについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
