シンボルマーク

ゲーム等のアイコン用に作ってみた。改造自由。
Canvas内に表示させるときは、
「&#10進数;」や「&#x16進数;」ではなく、
「\u16進数」と記述する。
Google Chromeでは、中央に表示されるが、
Internet Explorerでは、やや上寄りに表示されるようだ…。












お持ち帰りコーナー

「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。



特殊記号

記号 名称 Unicode HTML(ナンバーエンティティ)
10進数 16進数
ベンゼン環 U+232C ⌬ ⌬
ヒステリシス記号
※ファインマン経路積分の
記号に酷似している?
ので流用可能?
U+238E ⎎ ⎎
ベンゼン環 U+23E3 ⏣ ⏣
将棋の駒、白面 U+2616 ☖ ☖
将棋の駒、黒面 U+2617 ☗ ☗
毒性 U+2620 ☠ ☠
放射能 U+2622 ☢ ☢
陰陽太極図 U+262F ☯ ☯
樹脂識別コード-1 U+2673 ♳ ♳
樹脂識別コード-2 U+2674 ♴ ♴
樹脂識別コード-3 U+2675 ♵ ♵
樹脂識別コード-4 U+2676 ♶ ♶
樹脂識別コード-5 U+2677 ♷ ♷
樹脂識別コード-6 U+2678 ♸ ♸
樹脂識別コード-7 U+2679 ♹ ♹
交差する剣
古戦場を示す地図記号
U+2694 ⚔ ⚔



ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>シンボルマーク</title>
<script type="text/javascript" language="JavaScript">
<!--
var canvas; // canvas要素のオブジェクトを取得する為の変数
var context; // コンテキストを取得する為の変数
var w = 500; // canvasの横幅(canvasタグのwidth属性と同じ数値を直接代入)
var h = 500; // canvasの高さ(canvasタグのheight属性と同じ数値を直接代入)
var hw = w / 2; // canvasの横幅の半値幅
var hh = h / 2; // canvasの高さの半値幅
var bgcolor = "#c0c0c0"; // canvasの背景色

window.onload = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
};

var x232c = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="400pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u232c",250,250);
}; // ベンゼン環

var x2616 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="400pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2616",250,250);
};

var x2617 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="400pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2617",250,250);
};

var x2620 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#9400d3";
  context.fillRect(0, 0, 500, 500);
  context.font ="350pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2620",250,250);
}; // 毒性

var x2620_reverse = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#000000";
  context.fillRect(0, 0, 500, 500);
  context.font ="350pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#9400d3";
  context.fillText("\u2620",250,250);
};

var x2622 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffff00";
  context.fillRect(0, 0, 500, 500);
  context.font ="400pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2622",250,250);
}; // 放射能

var x262f = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="400pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u262f",250,250);
};

var hmyellow = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#000000";
  context.fillRect(0, 0, 500, 500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#ffff00";
  context.fillText("危",250,250);
}

var hmred = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ff0000";
  context.fillRect(0, 0, 500, 500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#ffffff";
  context.fillText("危",250,250);
}

var hmblue = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#0000ff";
  context.fillRect(0, 0, 500, 500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#ffffff";
  context.fillText("危",250,250);
}

var x2673 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2673",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("PET",250,450);
}

var x2674 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2674",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("HDPE",250,450);
}

var x2675 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2675",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("PVC",250,450);
}

var x2676 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2676",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("LDPE",250,450);
}

var x2677 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2677",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("PP",250,450);
}

var x2678 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2678",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("PS",250,450);
}

var x2679 = function(){
  canvas = document.getElementById("canvas"); // canvas要素のオブジェクトを取得
  context = canvas.getContext("2d"); // コンテキストを取得
  context.fillStyle = "#ffffff";
  context.fillRect(0,0,500,500);
  context.font ="300pt 'メイリオ'";
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.fillStyle = "#000000";
  context.fillText("\u2679",250,250);
  context.font ="50pt 'メイリオ'";
  context.fillText("OTHER",250,450);
}

// PNG画像として保存する関数
var saveasPNG = function(){
  var png = canvas.toDataURL("image/png");
  document.getElementById("newImg").src = png;
};
//-->
</script>
</head>
<body bgcolor="#c0c0c0" style="margin-left:auto;margin-right:auto;text-align:center;">
<h1>シンボルマーク</h1>

<canvas id="canvas" width="500" height="500" style="background-color:#ffffff;"></canvas>
<br>
<input type="button" value="&#x232C;" onclick="x232c()"
 style="background-color:#ffffff;color:#000000;">
<input type="button" value="&#x2616;" onclick="x2616()"
 style="background-color:#ffffff;color:#000000;">
<input type="button" value="&#x2617;" onclick="x2617()"
 style="background-color:#ffffff;color:#000000;">
<input type="button" value="&#x2620;" onclick="x2620()"
 style="background-color:#9400d3;color:#000000;">
<input type="button" value="&#x2620;" onclick="x2620_reverse()"
 style="background-color:#000000;color:#9400d3;">
<input type="button" value="&#x2622;" onclick="x2622()"
 style="background-color:#ffff00;color:#000000;">
<input type="button" value="&#x262F;" onclick="x262f()"
 style="background-color:#ffffff;color:#000000;">
<input type="button" value="危" onclick="hmyellow()"
 style="background-color:#000000;color:#ffff00;">
<input type="button" value="危" onclick="hmred()"
 style="background-color:#ff0000;color:#ffffff;">
<input type="button" value="危" onclick="hmblue()"
 style="background-color:#0000ff;color:#ffffff;">
<br>
<input type="button" value="&#x2673;(PET)" onclick="x2673()">
<input type="button" value="&#x2674;(HDPE)" onclick="x2674()">
<input type="button" value="&#x2675;(PVC)" onclick="x2675()">
<input type="button" value="&#x2676;(LDPE)" onclick="x2676()">
<br>
<input type="button" value="&#x2677;(PP)" onclick="x2677()">
<input type="button" value="&#x2678;(PS)" onclick="x2678()">
<input type="button" value="&#x2679;(OTHER)" onclick="x2679()">
<br>
<input type="button" value="PNG画像を保存する" onclick="saveasPNG()">
<br>

<br><hr><br>

<h2>お持ち帰りコーナー</h2>
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br>
<div><img id="newImg" width="500" height="500" style="background-color:#ffffff;"></div>

<br><br><hr>

</body>
</html>



Shadow Academy トップへ戻る

inserted by FC2 system