ethertank/README.md

## README.md

      
    Raw
  

              README.md
            
          
    https://gist.github.com/ethertank/e3bb18a54dbbed1eaaa1
     http://bl.ocks.org/ethertank/e3bb18a54dbbed1eaaa1
     http://bl.ocks.org/ethertank/raw/e3bb18a54dbbed1eaaa1


## css.css
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


.noto,
.noto > pre,
.noto > code,
.noto > var {
  font-family: "noto sans japanese", sans-serif;
}

.yugothic,
.yugothic > pre,
.yugothic > code,
.yugothic > var {
  font-family: "yu gothic", sans-serif;
}

.meiryo,
.meiryo > pre,
.meiryo > code,
.meiryo > var {
  font-family: meiryo, sans-serif;
}

## index.html
<!DOCTYPE html>
<html lang="ja">


<head>
    <meta charset="UTF-8" />
    <title>Hello, bl.ocks.org</title>
    <link rel="stylesheet" href="css.css"></link>
    <script src="js.js"></script>
</head>


<body>

    <h1>Hello, bl.ocks.org.</h1>

    <figure class="noto">
        <figcaption>Noto Sans Japanese</figcaption>
        <pre>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゐゆゑよらりるれろわをん
        </pre>
    </figure>

    <figure class="yugothic">
        <figcaption>游ゴシック</figcaption>
        <pre>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゐゆゑよらりるれろわをん
        </pre>
    </figure>

    <figure class="meiryo">
        <figcaption>メイリオ</figcaption>
        <pre>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゐゆゑよらりるれろわをん
        </pre>
    </figure>

    <figure>
        <canvas id="canvas1" width="300" height="300">
            <p>canvas を用いたデモ。特に意味のあるものは描画していない。</p>
        </canvas>
    </figure>


</body>
</html>

## js.js
window.addEventListener("load", windowLoaded, false);


function windowLoaded () {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");

  ctx.fillRect(0, 0, 300, 300);

  ctx.fillStyle="#fff";
  ctx.fillRect(100, 100, 100, 100);
}
	@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


	.noto,
	.noto > pre,
	.noto > code,
	.noto > var {
	font-family: "noto sans japanese", sans-serif;
	}

	.yugothic,
	.yugothic > pre,
	.yugothic > code,
	.yugothic > var {
	font-family: "yu gothic", sans-serif;
	}

	.meiryo,
	.meiryo > pre,
	.meiryo > code,
	.meiryo > var {
	font-family: meiryo, sans-serif;
	}
	<!DOCTYPE html>
	<html lang="ja">


	<head>
	<meta charset="UTF-8" />
	<title>Hello, bl.ocks.org</title>
	<link rel="stylesheet" href="css.css"></link>
	<script src="js.js"></script>
	</head>


	<body>

	<h1>Hello, bl.ocks.org.</h1>

	<figure class="noto">
	<figcaption>Noto Sans Japanese</figcaption>
	<pre>
	あいうえおかきくけこさしすせそたちつてとなにぬねの
	はひふへほまみむめもやゐゆゑよらりるれろわをん
	</pre>
	</figure>

	<figure class="yugothic">
	<figcaption>游ゴシック</figcaption>
	<pre>
	あいうえおかきくけこさしすせそたちつてとなにぬねの
	はひふへほまみむめもやゐゆゑよらりるれろわをん
	</pre>
	</figure>

	<figure class="meiryo">
	<figcaption>メイリオ</figcaption>
	<pre>
	あいうえおかきくけこさしすせそたちつてとなにぬねの
	はひふへほまみむめもやゐゆゑよらりるれろわをん
	</pre>
	</figure>

	<figure>
	<canvas id="canvas1" width="300" height="300">
	<p>canvas を用いたデモ。特に意味のあるものは描画していない。</p>
	</canvas>
	</figure>


	</body>
	</html>
	window.addEventListener("load", windowLoaded, false);


	function windowLoaded () {
	var canvas = document.getElementById("canvas1");
	var ctx = canvas.getContext("2d");

	ctx.fillRect(0, 0, 300, 300);

	ctx.fillStyle="#fff";
	ctx.fillRect(100, 100, 100, 100);
	}