//=============================================================================
//
// GkEmblemMaker.js JAVAScript Emblem Maker エンブレムメーカー
// Programmed by G.K.2018
//
//=============================================================================
//変数の宣言===================================================================
var canvas; //キャンバスオブジェクト
var ctx; //描画コンテキスト
var winWidth = 500; //CANVASの横幅
var winHeight = 600; //CANVASの高さ
var selectStep = 0; //選択項目のステップ数
var selectValue = new Array(); //選択値の配列
var mesStr = new Array(); //表示メッセージ
var cx = 0; //クリック（タッチ）位置X
var cy = 0; //クリック（タッチ）位置Y
var bton = 0; //タッチしたボタンの番号
//関数の宣言========================================================================
//クリック（タップ）時のイベント----------------------
function onDown(e) {
var rect = e.target.getBoundingClientRect();
cx = parseInt(e.clientX - rect.left);
cy = parseInt(e.clientY - rect.top);
if(bton == 0) {
checkButtonOn();
}
draw();
}
//タップ時のイベント----------------------
function onDown2(e) {
e.preventDefault();
var rect = e.target.getBoundingClientRect();
var touchObject = e.changedTouches[0];
cx = parseInt(touchObject.clientX - rect.left);
cy = parseInt(touchObject.clientY - rect.top);
if(bton == 0) {
checkButtonOn();
}
draw();
}
//初期化処理-------------------------------------------
function init() {
//描画コンテキストの取得
canvas = document.getElementById("mainCanvas");
if ( ! canvas || ! canvas.getContext ) { return false; }
ctx = canvas.getContext('2d');
//イベントの追加
canvas.addEventListener('mousedown', onDown, false);
canvas.addEventListener('touchstart', onDown2, false);
selectStep = 0;
//選択値の初期化
for(var i=0; i<11; i++) {
selectValue[i] = -1;
}
}
//背景を描画------------------------------------------
function draw() {
ctx.clearRect(0, 0, 500, 600); //画面のクリア
draw_Emblem();
draw_Menu();
//メッセージの表示
set_MessageStr();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "20px 'ＭＳ Ｐゴシック'"; //表示フォントの設定
ctx.fillText(mesStr[0], 10, 20);
ctx.fillText(mesStr[1], 30, 50);
ctx.fillText(mesStr[2], 30, 75);
bton = 0;
}
//最初に実行------------------------------------------
function main(){
init();
draw();
}
//表示メッセージをセットする--------------------------
function set_MessageStr() {
mesStr[0] = "";
mesStr[1] = "";
mesStr[2] = "";
switch(selectStep) {
case 0:
mesStr[0] = "[はじめましょう]";
mesStr[1] = "画面をタップすると選択項目が出てくるので、";
mesStr[2] = "お好きな色や形を選んでください。";
break;
case 1:
mesStr[0] = "[ステップ 01/10]";
mesStr[1] = "背景色を選んでください。（左上４分の１）";
break;
case 2:
mesStr[0] = "[ステップ 02/10]";
mesStr[1] = "背景色を選んでください。（右上４分の１）";
break;
case 3:
mesStr[0] = "[ステップ 03/10]";
mesStr[1] = "背景色を選んでください。（左下４分の１）";
break;
case 4:
mesStr[0] = "[ステップ 04/10]";
mesStr[1] = "背景色を選んでください。（右下４分の１）";
break;
case 5:
mesStr[0] = "[ステップ 05/10]";
mesStr[1] = "中央円の大きさを選んでください。";
break;
case 6:
mesStr[0] = "[ステップ 06/10]";
mesStr[1] = "中央円の色を選んでください。";
break;
case 7:
mesStr[0] = "[ステップ 07/10]";
mesStr[1] = "四角形の位置を選んでください。";
break;
case 8:
mesStr[0] = "[ステップ 08/10]";
mesStr[1] = "四角形の色を選んでください。";
break;
case 9:
mesStr[0] = "[ステップ 09/10]";
mesStr[1] = "小円の位置を選んでください。";
break;
case 10:
mesStr[0] = "[ステップ 10/10]";
mesStr[1] = "小円の色を選んでください。";
break;
case 11:
mesStr[1] = "完成！！！！";
break;
}
//mesStr[2] = " " + cx + "," + cy + "," + bton; //debug
}
//エンブレムを条件に従って描画する--------------------
function draw_Emblem() {
var xpos = 0;
var ypos = 0;
ctx.globalAlpha = 1;
//[STEP 01] 背景-左上
if(selectValue[1] > -1) {
set_Color(selectValue[1]);
ctx.fillRect(0, 100, 250, 250);
}
//[STEP 02] 背景-右上
if(selectValue[2] > -1) {
set_Color(selectValue[2]);
ctx.fillRect(250, 100, 250, 250);
}
//[STEP 03] 背景-左下
if(selectValue[3] > -1) {
set_Color(selectValue[3]);
ctx.fillRect(0, 350, 250, 250);
}
//[STEP 04] 背景-右下
if(selectValue[4] > -1) {
set_Color(selectValue[4]);
ctx.fillRect(250, 350, 250, 250);
}
//[STEP 05、06] 中央円
if(selectValue[5] > -1) {
var radius = 200;
if(selectValue[5] == 0 || selectValue[5] == 1 || selectValue[5] == 2) { radius = 270; }
if(selectValue[5] == 3 || selectValue[5] == 4 || selectValue[5] == 5) { radius = 180; }
if(selectValue[5] == 6 || selectValue[5] == 7 || selectValue[5] == 8) { radius = 90; }
ctx.beginPath();
ctx.arc(250, 350, radius, 0, Math.PI*2, true);
if(selectValue[6] == -1) {
//線のみ
ctx.stroke();
}
else
{
//塗りつぶしあり
set_Color(selectValue[6]);
ctx.fill() ;
}
}
//[STEP 07、08] 四角形
if(selectValue[7] > -1) {
if(selectValue[7] == 0 || selectValue[7] == 3 || selectValue[7] == 6) { xpos = 0; }
if(selectValue[7] == 1 || selectValue[7] == 4 || selectValue[7] == 7) { xpos = 166; }
if(selectValue[7] == 2 || selectValue[7] == 5 || selectValue[7] == 8) { xpos = 332; }
if(selectValue[8] == -1) {
//線のみ
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.strokeRect(xpos, 100, 166, 500);
}
else
{
//塗りつぶしあり
set_Color(selectValue[8]);
ctx.fillRect(xpos, 100, 166, 500);
}
}
//[STEP 09、10] 小丸
if(selectValue[9] > -1) {
switch(selectValue[9])
{
case 0: xpos = 83; ypos = 83; break;
case 1: xpos = 250; ypos = 83; break;
case 2: xpos = 417; ypos = 83; break;
case 3: xpos = 83; ypos = 250; break;
case 4: xpos = 250; ypos = 250; break;
case 5: xpos = 417; ypos = 250; break;
case 6: xpos = 83; ypos = 417; break;
case 7: xpos = 250; ypos = 417; break;
case 8: xpos = 417; ypos = 417; break;
}
ctx.beginPath();
ctx.arc(xpos, ypos+100, 80, 0, Math.PI*2, true);
if(selectValue[10] == -1) {
//線のみ
ctx.stroke();
}
else
{
//塗りつぶしあり
set_Color(selectValue[10]);
ctx.fill() ;
}
}
//外枠の描画
set_Color(0);
ctx.fillRect(0, 0, 500, 100);
ctx.globalAlpha = 1.0;
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.strokeRect(0, 100, 500, 500);
}
//メニューを表示する---------------------------------
function draw_Menu() {
if(selectStep > 10) {
return;
}
ctx.globalAlpha = 0.8;
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(100, 200, 300, 300);
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.strokeRect(100, 200, 300, 300); //外枠の描画
switch(selectStep) {
case 0:
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "22px 'ＭＳ Ｐゴシック'"; //表示フォントの設定
ctx.fillText("タッチしてください。", 170, 350);
break;
//色メニュー
case 1:
case 2:
case 3:
case 4:
case 6:
case 8:
case 10:
set_Color(0);
ctx.fillRect(100, 200, 100, 100);
set_Color(1);
ctx.fillRect(200, 200, 100, 100);
set_Color(2);
ctx.fillRect(300, 200, 100, 100);
set_Color(3);
ctx.fillRect(100, 300, 100, 100);
set_Color(4);
ctx.fillRect(200, 300, 100, 100);
set_Color(5);
ctx.fillRect(300, 300, 100, 100);
set_Color(6);
ctx.fillRect(100, 400, 100, 100);
set_Color(7);
ctx.fillRect(200, 400, 100, 100);
set_Color(8);
ctx.fillRect(300, 400, 100, 100);
break;
//大きさメニュー大中小
case 5:
ctx.strokeRect(100, 200, 300, 100);
ctx.strokeRect(100, 300, 300, 100);
ctx.strokeRect(100, 400, 300, 100);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "36px 'ＭＳ Ｐゴシック'"; //表示フォントの設定
ctx.fillText("大", 232, 232+25);
ctx.fillText("中", 232, 332+25);
ctx.fillText("小", 232, 432+25);
break;
//位置メニュー左中右
case 7:
ctx.strokeRect(100, 200, 100, 300);
ctx.strokeRect(200, 200, 100, 300);
ctx.strokeRect(300, 200, 100, 300);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "36px 'ＭＳ Ｐゴシック'"; //表示フォントの設定
ctx.fillText("左", 132, 332+25);
ctx.fillText("中", 232, 332+25);
ctx.fillText("右", 332, 332+25);
break;
//位置メニュー９か所
case 9:
for (var i=0; i<3; i++) {
for (var j=0; j<3; j++) {
ctx.strokeRect(100 + j*100, 200 + i*100, 100, 100);
}
}
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "18px 'ＭＳ Ｐゴシック'"; //表示フォントの設定
ctx.fillText("左上", 132, 232+25);
ctx.fillText(" 上 ", 232, 232+25);
ctx.fillText("右上", 332, 232+25);
ctx.fillText(" 左 ", 132, 332+25);
ctx.fillText("中央", 232, 332+25);
ctx.fillText(" 右 ", 332, 332+25);
ctx.fillText("左下", 132, 432+25);
ctx.fillText(" 下 ", 232, 432+25);
ctx.fillText("右下", 332, 432+25);
break;
}
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.globalAlpha = 1.0;
}
//色をセットする--------------------------------------
function set_Color(num) {
switch(num) {
case 0:
ctx.fillStyle = "rgb(255, 255, 255)";
break;
case 1:
ctx.fillStyle = "rgb(128, 128, 128)";
break;
case 2:
ctx.fillStyle = "rgb(0, 0, 0)";
break;
case 3:
ctx.fillStyle = "rgb(255, 0, 0)";
break;
case 4:
ctx.fillStyle = "rgb(0, 255, 0)";
break;
case 5:
ctx.fillStyle = "rgb(0, 0, 255)";
break;
case 6:
ctx.fillStyle = "rgb(255, 255, 0)";
break;
case 7:
ctx.fillStyle = "rgb(0, 255, 255)";
break;
case 8:
ctx.fillStyle = "rgb(255, 0, 255)";
break;
}
}
//メニューを押しているかを調べる-----------------------
function checkButtonOn() {
bton = 0;
//メニュー内のタッチチェック
if(cx > 100 && cx < 400 && cy > 200 && cy < 500) {
bton = parseInt((cx - 100) / 100) + parseInt((cy - 200) / 100) * 3;
selectValue[selectStep] = bton;
//選択ステップを進める
if(selectStep < 11) {
selectStep ++;
}
}
}
//ウィンドウを閉じる----------------------------------
function MM_closeFloatWindow(theURL) {
window.close(this);
}
|