ゲーム等のアイコン用に作ってみた。改造自由。
Canvas内に表示させるときは、
「
進数;」や「進数;」ではなく、
「\u16進数」と記述する。
Google Chromeでは、中央に表示されるが、
Internet Explorerでは、やや上寄りに表示されるようだ…。
記号 | 名称 | 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="⌬" onclick="x232c()" style="background-color:#ffffff;color:#000000;"> <input type="button" value="☖" onclick="x2616()" style="background-color:#ffffff;color:#000000;"> <input type="button" value="☗" onclick="x2617()" style="background-color:#ffffff;color:#000000;"> <input type="button" value="☠" onclick="x2620()" style="background-color:#9400d3;color:#000000;"> <input type="button" value="☠" onclick="x2620_reverse()" style="background-color:#000000;color:#9400d3;"> <input type="button" value="☢" onclick="x2622()" style="background-color:#ffff00;color:#000000;"> <input type="button" value="☯" 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="♳(PET)" onclick="x2673()"> <input type="button" value="♴(HDPE)" onclick="x2674()"> <input type="button" value="♵(PVC)" onclick="x2675()"> <input type="button" value="♶(LDPE)" onclick="x2676()"> <br> <input type="button" value="♷(PP)" onclick="x2677()"> <input type="button" value="♸(PS)" onclick="x2678()"> <input type="button" value="♹(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> |