HTML5 Canvasでその他の論理ゲート記号を描く

ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ありません。

このブログではサイドバーに広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLatexのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

HTML5 Canvasでその他の論理ゲート記号を描く

9月 29, 2020

今回は、HTML5 CanvasのAPIを利用してMIL（軍事）規格のXNORゲート記号を描いてみた。

XNORゲートのシンボルの完成図は次のとおり。

XNORゲートのシンボルは、XORゲートのソースコードとNORゲートのソースコードとを合成するだけなので簡単。XORゲートの本体部分の末尾に小さな円をくっつけ、さらにそこに接尾する直線の位置をそれに合わせてやや調節してやればよい。

まず前回の実用論理ゲート記号を描いたときのXORゲートのソースコード全体をコピー＆ペーストし、NORゲートのソースコードにある小さな円を描く部分のソースコードを挿入した。さらに、本体部分に付属する三つの直線を描く部分のソースコードをNORゲートのソースコードのそれに置き換えた。

これだけでXNORゲートのシンボル図のソースコードは完成。それは次のようになる。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="exclusiveNotOrGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("exclusiveNotOrGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
XNORゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(15,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(55,2,60,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(50,42,15,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(27,22,15,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
頭部の皿を描く
*/
//パス（軌道）を初期化
context.beginPath();
//描き始めの座標
context.moveTo(10,2);
//2次ベジェ曲線
context.quadraticCurveTo(24,22,10,40);
//パスを閉じずに描画
context.stroke();

/*
尾部にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(65,22,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
//尾部の直線
context.moveTo(70,22);
context.lineTo(85,22);
//頭部の上側の直線
context.moveTo(0,11);
context.lineTo(20,11);
//頭部の下側の直線
context.moveTo(0,32);
context.lineTo(20,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

IMPLYゲート記号を描く

IMPLYゲートは、論理和のブール変数の一方を論理否定したものと等しい。

\[ x_1 \rightarrow x_2 = \overline{x_1} + x_2 \]

従って論理和の2つの入力側のブール変数（独立変数）の内の1つを論理否定するゲートを作ることでIMPLYゲートを実現することができる。

IMPLYゲートのシンボルの完成図は次のとおり。

IMPLYゲート記号を描くためのHTMLとJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="implyGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("implyGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
IMPLYゲートの本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(15,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(55,2,60,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(50,42,15,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(27,22,15,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(13,10,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
//直線の太さ
context.lineWidth = 1;
//パス（軌道）を初期化
context.beginPath();
/*右端尾部の直線*/
//描き始める座標
context.moveTo(60,22);
//直線の終点座標
context.lineTo(75,22);
/*左端頭部の上側の直線*/
context.moveTo(0,10);
context.lineTo(10,10);
/*左端頭部の下側の直線*/
context.moveTo(0,32);
context.lineTo(20,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

ド・モルガンの定理を描く

ド・モルガンの定理を表わすときに使われている、2つの入力変数（独立変数）を共に論理否定するORゲートとANDゲートを描いてみた。

ORゲート記号のほうはIMPLYゲート記号の頭部の片側にくっついている円を両側に増やせばよいだけ。その完成図は次のようになる。

このHTMLおよびJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="deMorganOrGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
//特定のcanvas要素を取得して変数に代入
var canvas = document.getElementById("deMorganOrGateSymbol");
//2次元描画コンテキストを取得して変数に代入
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
本体部分の輪郭線を描く
*/
//輪郭線の太さ
context.lineWidth = 2;
//輪郭線の色
context.strokeStyle = 'black';
//パス（軌道）を初期化
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(15,2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(55,2,60,22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(50,42,15,40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(27,22,15,2);
//closePath()メソッドでパスを閉じる
context.closePath();
//stroke()メソッドで描画
context.stroke();

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(13,10,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();
context.beginPath();
context.arc(13,32,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
//直線の太さ
context.lineWidth = 1;
//パス（軌道）を初期化
context.beginPath();
/*右端尾部の直線*/
//描き始める座標
context.moveTo(60,22);
//直線の終点座標
context.lineTo(75,22);
/*左端頭部の上側の直線*/
context.moveTo(0,10);
context.lineTo(10,10);
/*左端頭部の下側の直線*/
context.moveTo(0,32);
context.lineTo(10,32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

論理否定の入力変数（独立変数）を2つ伴ったANDゲート記号の完成図は次のとおり。

このHTMLおよびJavaScriptのソースコードは次のとおり。

<!DOCTYPE html>
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="deMorganOrGateSymbol" width="100" height="50">
あなたのブラウザはCanvas要素に対応していません。
</canvas>
</div>
<script>
var canvas = document.getElementById("deMorganAndGateSymbol");
var context = canvas.getContext("2d");

//translate(x,y)メソッドで図形を平行移動できる
context.translate(0, 0);
//図形を上下左右に伸縮
context.scale(1,1);

/*
本体部分の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//輪郭線の描き始めの座標
context.moveTo(20,3);
//上の直線部分の終点座標
context.lineTo(41,3);
//bezierCurveTo()メソッドで右横の曲線部分を
context.bezierCurveTo(65,3,65,43,41,43);
//下の直線部分の終点座標
context.lineTo(20,43);
//左の直線部分の終点座標
context.lineTo(20,3);
context.closePath();
context.stroke();

/*
頭部の片側にくっついている円の輪郭線を描く
*/
context.beginPath();
//円を描くためにarc(x,y,radius,startPoint,endPoint)メソッドを使う
context.arc(15,11,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();
context.beginPath();
context.arc(15,35,4,(Math.PI/180)*0, (Math.PI/180)*360);
context.closePath();
context.stroke();

/*
付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
//尾部の直線
context.moveTo(57,22);
context.lineTo(72,22);
//頭部の上側の直線
context.moveTo(0,11);
context.lineTo(10,11);
//頭部の下側の直線
context.moveTo(0,35);
context.lineTo(10,35);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

ド・モルガンの定理を描いてみた。

各々のシンボルを平行移動させるためにtranslate(x,y)メソッドを用いた。この方法だと少しややこしい。translate(x,y)メソッドはキャンバスの座標系ごと移動させてしまうので平行移動に合わせて原点も移動してしまう。それ以降のtranslate(x,y)メソッドではその引数として相対的座標を指定しなければならない。

描くものを平行移動させるもう一つの方法は、xとyの変数を用いること。予約語varでxとyという変数を宣言し、各種メソッドの引数にぞれぞれ加算しておくと、変数に代入する値を変えるだけでキャンバスの上に描くオブジェクトが移動してくれるので便利。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML5 Canvasで論理ゲート記号を描く</title>
</head>
<body>
<div style="text-align: center">
<canvas id="orGateSymbol_var" width="100" height="50">
あなたのブラウザはcanvas要素に対応していません。
</canvas>
</div>
<script>
var canvas = document.getElementById("orGateSymbol_var");
var context = canvas.getContext("2d");

/*
xとyの座標を入れる変数2つを宣言して0で初期化
変数の値を変えることでオブジェクトを平行移動
*/
var x = 0;
var y = 0;

//scale()メソッドで図形を上下左右に伸縮できる
context.scale(1,1);

/*
ORゲートの本体部分の輪郭線を描く
*/
context.lineWidth = 2;
context.strokeStyle = 'black';
context.beginPath();
//輪郭線を描き始める座標
context.moveTo(x+12,y+2);
//本体上辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+52,y+2,x+57,y+22);
//本体下辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+47,y+42,x+12,y+40);
//本体左辺の輪郭曲線を2次ベジェ曲線を使って
context.quadraticCurveTo(x+24,y+22,x+12,y+2);
context.closePath();
context.stroke();

/*
本体に付属する3つの直線を描く
*/
context.lineWidth = 1;
context.beginPath();
/*右端尾部の直線*/
context.moveTo(x+57,y+22);
context.lineTo(x+72,y+22);
/*左端頭部の上側の直線*/
context.moveTo(x+0,y+10);
context.lineTo(x+17,y+10);
/*左端頭部の下側の直線*/
context.moveTo(x+0,y+32);
context.lineTo(x+17,y+32);
//パスを閉じずに描画
context.stroke();
</script>
</body>
</html>

CSS

このブログを検索

学校に通わずに学ぶログ

ブログの説明

HTML5 Canvasでその他の論理ゲート記号を描く

IMPLYゲート記号を描く

ド・モルガンの定理を描く

関連記事

コメント

コメントを投稿

このブログの人気の投稿

Visual Studio 2019にはC++のためのフォームデザイナーがない件

10の補数と9の補数と2の補数と1の補数

LibreOffice 6 Calcでフォーム（ダイアログ）を作成してマクロで表示