はてなブログでTikZjaxを利用する（オンラインのTikZ）

はてなブログでTikZが利用できる，TikZjaxなるものがあるので紹介します。

設定

Markdown記法なら，以下をそのまま文末にでも書いておきます。

<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>

描き方

<script>の中にtikzpicture環境を書きます。

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (3cm);
  \end{tikzpicture}
</script>

見たまま編集の場合は，HTMLから編集をする。

<script type="text/tikz">
  \begin{tikzpicture}
    \draw[thick] (0,0) -- (6,1);
   \coordinate (O) at (0,0);
   \node[below] at (O) {O};
  \end{tikzpicture}
</script>

コンパイルに一瞬時間がかかりますが，このように表示されます。

注意

ライブラリは使えないようです。mathやcalcなどが呼び出せないので，使用にはかなりの制限があります。+, ^などの簡単な計算はできます。sinなどの関数を使うことはできません。

plotも使えません。

\defは使えます。

日本語に対応していないので，後述の\nodeに日本語を記述するとコンパイルしません。

TeXとして

TeXとして使おうとすると，次のようになります。

小さく表示されるので，あまり現実的ではないと思います。

TikZの基本的な使い方

線の描画 \draw

--

\drawは線をかくことができます。--あるいはtoは直線をかく命令です。

\begin{tikzpicture}
    \draw (0,0) -- (5,0);
  \end{tikzpicture}

オプションとして，太さ，色，スタイルなどが指定できます。

 \begin{tikzpicture}
    \draw[thin] (0,1) -- (5,1);
    \draw (0,0) -- (5,0);
    \draw[thick] (0,-1) -- (5,-1);
    \draw[very thick] (0,-2) -- (5,-2);
    \draw[ultra thick] (0,-3) -- (5,-3);
  \end{tikzpicture}

 \begin{tikzpicture}
    \draw[blue] (0,1) -- (5,1);
    \draw[red] (0,0) -- (5,0);
    \draw[green] (0,-1) -- (5,-1);
    \draw[yellow] (0,-2) -- (5,-2);
    \draw[gray] (0,-3) -- (5,-3);
  \end{tikzpicture}

 \begin{tikzpicture}
    \draw (0,1) -- (5,1);
    \draw[dashed] (0,0) -- (5,0);
    \draw[dotted] (0,-1) -- (5,-1);
  \end{tikzpicture}

circle

中心の座標を指定して，円をかくことができます。

<script type="text/tikz">
 \begin{tikzpicture}
    \draw (2,1) circle (2cm);
  \end{tikzpicture}
</script>

\drawについてより詳しく

a-muneniku-sore.hatenablog.com

塗りつぶしfill

drawと同じ要領で，fillを使うと塗りつぶしができます。

<script type="text/tikz">
 \begin{tikzpicture}
    \fill (2,1) circle (2cm);
  \end{tikzpicture}
</script>

デフォルトでは塗りつぶしの色は黒です。

fillのオプションで，色，透明度などを指定することができます。

<script type="text/tikz">
 \begin{tikzpicture}
    \fill[red] (2,1) circle (2cm);
    \fill[blue] (5,1) circle (2cm);
  \end{tikzpicture}
</script>

点にテキストを入れる node

\node at (座標) {};

\path (座標) node {};の代替命令

\begin{tikzpicture}

\node[below] at (0,0) {O};

\end{tikzpicture}

オプション

位置：above below left right

フォントサイズ：font=\scriptsize (フォントサイズTeXコマンド?)

塗りつぶし：'fill=white' (矩形の背景色)

形の指定がなければ，矩形で塗られる。

nodeに対する余白　'inner sep=0pt'

\begin{tikzpicture}
\def\d{2}
\fill (-\d,0) circle (2pt);
\node at (-\d,0) {nothing};

\fill (0,0) circle (2pt);
\node[above] at (0,0) {above};

\fill (\d,0) circle (2pt);
\node[below] at (\d,0) {below};

\fill (2*\d,0) circle (2pt);
\node[left] at (2*\d,0) {left};

\fill (3*\d,0) circle (2pt);
\node[right] at (3*\d,0) {right};

\fill (4*\d,0) circle (2pt);
\node[above right] at (4*\d,0) {above right};
\end{tikzpicture}

shpaeを指定して fill を入れると次のようになります。

\begin{tikzpicture}
\def\d{2}
\fill (-\d,0) circle (2pt);
\node[above] at (-\d,0) {nothing};
\node[fill=blue,below] at (-\d,0) {fill=blue};

\fill (0,0) circle (2pt);
\node[above] at (0,0) {circle};
\node[fill=blue,below,shape=circle] at (0,0) {fill=blue};


\fill (\d,0) circle (2pt);
\node[above] at (\d,0) {cooridnate};
\node[fill=blue,below,shape=coordinate] at (-\d,0) {fill=blue};
\end{tikzpicture}

回転

\begin{tikzpicture}
\def\d{2}

\fill (0,0) circle (2pt);
\node[above,rotate=30] at (0,0) {rotate=30};

\end{tikzpicture}

点に名前を付ける coordinate

点に単に名前を付けたい場合に次のようにします。

\coordinate (名前) at (座標);

\node (名前) at (座標) {};を簡略化した命令です。

例えば，

 \begin{tikzpicture}
    \coordinate (A) at (0,0);
    \coordinate (B) at (2,3);
    \draw (A) -- (B);
    \node[left] at (A) {A};
    \node[right] at (B) {B};
  \end{tikzpicture}

一度点の名前を定義すると，以降で使用することができます。

tikzの座標は，座標と同時にベクトルとして取り扱うことができます。（calcライブラリー）

3dでかく

単純に3つの座標で表すと，自動で3次元として扱ってくれます。デフォルトの向きは以下の通りです。

 \begin{tikzpicture}
\draw[-latex] (0,0,0) -- (5,0,0) node[pos=1.1] {$x$};
\draw[-latex] (0,0,0) -- (0,5,0) node[pos=1.1] {$y$};
\draw[-latex] (0,0,0) -- (0,0,5) node[pos=1.1] {$z$};
  \end{tikzpicture}

プロットテスト

三角関数

ライブラリーテスト