HTML5・サラスの方法





お持ち帰りコーナー

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



ソースコード

sarrus.html

<!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>



Shadow Academy トップへ戻る

inserted by FC2 system