<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5・サラスの方法</title> <script type="text/javascript" language="JavaScript"> <!-- // グローバル変数 var cvs; // canvas要素のオブジェクトを取得する為の変数 var cnt; // コンテキストを取得する為の変数 var w = 360; // canvasの横幅 var h = 180; // canvasの高さ var hw = 180; // canvasの横幅の半値幅 var hh = 90; // canvasの高さの半値幅 var bgcolor = "#ffffff"; // canvasの背景色 var color0 = "#000000"; // 黒色 var color1 = "#ff0000"; // 赤色 var color2 = "#0000ff"; // 青色 window.onload = function(){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.fillStyle = bgcolor; cnt.fillRect(0, 0, w, h); // 黒色で行列式の括弧を描く。 drawColorLine(50, 50, 50, 130, color0); drawColorLine(130, 50, 130, 130, color0); drawColorLine(140, 50, 140, 130, color0); drawColorLine(220, 50, 220, 130, color0); drawColorLine(230, 50, 230, 130, color0); drawColorLine(310, 50, 310, 130, color0); // 黒色でサイクリック用の三点リーダを描く。 cnt.font ="12pt 'メイリオ'"; cnt.fillStyle = "#000000"; // 黒色 cnt.textBaseline = "middle"; cnt.textAlign = "center"; cnt.fillText("…",30,90); cnt.fillText("…",330,90); // 黒色でアルファベットを9種類×各3個描く。 cnt.fillText("a",60,60); cnt.fillText("b",90,60); cnt.fillText("c",120,60); cnt.fillText("d",60,90); cnt.fillText("e",90,90); cnt.fillText("f",120,90); cnt.fillText("g",60,120); cnt.fillText("h",90,120); cnt.fillText("i",120,120); cnt.fillText("a",150,60); cnt.fillText("b",180,60); cnt.fillText("c",210,60); cnt.fillText("d",150,90); cnt.fillText("e",180,90); cnt.fillText("f",210,90); cnt.fillText("g",150,120); cnt.fillText("h",180,120); cnt.fillText("i",210,120); cnt.fillText("a",240,60); cnt.fillText("b",270,60); cnt.fillText("c",300,60); cnt.fillText("d",240,90); cnt.fillText("e",270,90); cnt.fillText("f",300,90); cnt.fillText("g",240,120); cnt.fillText("h",270,120); cnt.fillText("i",300,120); // 黒色の丸でアルファベットを囲む。 cnt.beginPath(); cnt.arc(150, 60, 10, 0, Math.PI*2, true); cnt.stroke(); cnt.beginPath(); cnt.arc(180, 60, 10, 0, Math.PI*2, true); cnt.stroke(); cnt.beginPath(); cnt.arc(210, 60, 10, 0, Math.PI*2, true); cnt.stroke(); // 赤色で矢印を描く。 drawColorLine(150, 60, 230, 140, color1); drawColorLine(180, 60, 260, 140, color1); drawColorLine(210, 60, 290, 140, color1); fillColorTriangle(230, 140, 220, 135, 225, 130, color1); fillColorTriangle(260, 140, 250, 135, 255, 130, color1); fillColorTriangle(290, 140, 280, 135, 285, 130, color1); // 赤色の丸で囲んだ「+」を描く。 cnt.font ="12pt 'メイリオ'"; cnt.fillStyle = "#ff0000"; // 赤色 cnt.textBaseline = "middle"; cnt.textAlign = "center"; cnt.fillText("+",240,150); cnt.fillText("+",270,150); cnt.fillText("+",300,150); cnt.beginPath(); cnt.arc(240, 150, 10, 0, Math.PI*2, true); cnt.stroke(); cnt.beginPath(); cnt.arc(270, 150, 10, 0, Math.PI*2, true); cnt.stroke(); cnt.beginPath(); cnt.arc(300, 150, 10, 0, Math.PI*2, true); cnt.stroke(); // 青色で矢印を描く。 drawColorLine(150, 60, 70, 140, color2); drawColorLine(180, 60, 100, 140, color2); drawColorLine(210, 60, 130, 140, color2); fillColorTriangle(70, 140, 80, 135, 75, 130, color2); fillColorTriangle(100, 140, 110, 135, 105, 130, color2); fillColorTriangle(130, 140, 140, 135, 135, 130, color2); // 青色の丸で囲んだ「-」を描く。 cnt.font ="12pt 'メイリオ'"; cnt.fillStyle = "#0000ff"; // 青色 cnt.textBaseline = "middle"; cnt.textAlign = "center"; cnt.fillText("-",60,150); cnt.fillText("-",90,150); cnt.fillText("-",120,150); cnt.beginPath(); cnt.arc(60, 150, 10, 0, Math.PI*2, true); cnt.stroke(); cnt.beginPath(); cnt.arc(90, 150, 10, 0, Math.PI*2, true); cnt.stroke(); cnt.beginPath(); cnt.arc(120, 150, 10, 0, Math.PI*2, true); cnt.stroke(); }; // 直線を引く関数 var drawLine = function(x0, y0, x1, y1){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.stroke(); }; // カラー版直線を引く関数 var drawColorLine = function(x0, y0, x1, y1, color){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.strokeStyle = color; cnt.stroke(); }; // 三角形を描画する関数 var drawTriangle = function(x0, y0, x1, y1, x2, y2){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.lineTo(x2,y2); cnt.closePath(); cnt.stroke(); }; // カラー版三角形を描画する関数 var drawColorTriangle = function(x0, y0, x1, y1, x2, y2, color){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.lineTo(x2,y2); cnt.closePath(); cnt.strokeStyle = color; cnt.stroke(); }; // 三角形を塗りつぶす関数 var fillTriangle = function(x0, y0, x1, y1, x2, y2){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.lineTo(x2,y2); cnt.closePath(); cnt.fill(); }; // カラー版三角形を塗りつぶす関数 var fillColorTriangle = function(x0, y0, x1, y1, x2, y2, color){ cvs = document.getElementById("id_cvs"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.lineTo(x2,y2); cnt.closePath(); cnt.fillStyle = color; cnt.fill(); }; // PNG画像として保存 var saveasPNG = function(){ var png = cvs.toDataURL("image/png"); document.getElementById("newImg").src = png; }; //--> </script> </head> <body bgcolor="#ffd700" style="margin-left:auto;margin-right:auto;text-align:center;"> <h1>HTML5・サラスの方法</h1> <canvas id="id_cvs" width="360" height="180"></canvas> <br> <input type="button" value="PNG画像として保存" onclick="saveasPNG()"> <br><hr><br> <h2>お持ち帰りコーナー</h2> 「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br> <img id="newImg"> </body> </html> |