[スクリプトの概要]
描画条件を選択していくことで、オリジナルエンブレムを作成するスクリプト
  3. //=============================================================================
  4. //
  5. //  GkEmblemMaker.js   JAVAScript Emblem Maker エンブレムメーカー
  6. //　　　　　　　　　　　　Programmed by G.K.2018
  7. //
  8. //=============================================================================
  10. //変数の宣言===================================================================
  11. var canvas;				//キャンバスオブジェクト
  12. var ctx;				//描画コンテキスト
  14. var winWidth  = 500;			//CANVASの横幅
  15. var winHeight = 600;			//CANVASの高さ
  17. var selectStep = 0;			//選択項目のステップ数
  18. var selectValue = new Array();		//選択値の配列
  19. var mesStr = new Array();		//表示メッセージ
  21. var cx = 0;				//クリック（タッチ）位置X
  22. var cy = 0;				//クリック（タッチ）位置Y
  23. var bton = 0;				//タッチしたボタンの番号
  27. //関数の宣言========================================================================
  30. //クリック（タップ）時のイベント----------------------
  31. function onDown(e) {
  32.     var rect = e.target.getBoundingClientRect();
  33.     cx = parseInt(e.clientX - rect.left);
  34.     cy = parseInt(e.clientY - rect.top);
  36.     if(bton == 0) {
  37.         checkButtonOn();
  38.     }
  40.     draw();
  41. }
  44. //タップ時のイベント----------------------
  45. function onDown2(e) {
  46.     e.preventDefault();
  48.     var rect = e.target.getBoundingClientRect();
  49.     var touchObject = e.changedTouches[0];
  50.     cx = parseInt(touchObject.clientX - rect.left);
  51.     cy = parseInt(touchObject.clientY - rect.top);
  53.     if(bton == 0) {
  54.         checkButtonOn();
  55.     }
  57.     draw();
  58. }
  61. //初期化処理-------------------------------------------
  62. function init() {
  64.     //描画コンテキストの取得
  65.     canvas = document.getElementById("mainCanvas");
  66.     if ( ! canvas || ! canvas.getContext ) { return false; }
  67.     ctx = canvas.getContext('2d');
  69.     //イベントの追加
  70.     canvas.addEventListener('mousedown', onDown, false);
  71.     canvas.addEventListener('touchstart', onDown2, false);
  73.     selectStep = 0;
  75.     //選択値の初期化
  76.     for(var i=0; i<11; i++) {
  77.         selectValue[i] = -1;
  78.     }
  79. }
  83. //背景を描画------------------------------------------
  84. function draw() {
  85.     ctx.clearRect(0, 0, 500, 600);		//画面のクリア
  87.     draw_Emblem();
  88.     draw_Menu();
  90.     //メッセージの表示
  91.     set_MessageStr();
  92.     ctx.fillStyle = "rgb(0, 0, 0)";
  93.     ctx.font = "20px 'ＭＳ Ｐゴシック'";	//表示フォントの設定
  94.     ctx.fillText(mesStr[0], 10, 20);
  95.     ctx.fillText(mesStr[1], 30, 50);
  96.     ctx.fillText(mesStr[2], 30, 75);
  98.     bton = 0;
  99. }
  102. //最初に実行------------------------------------------
  103. function main(){
  104.     init();
  105.     draw();
  106. }
  109. //表示メッセージをセットする--------------------------
  110. function set_MessageStr() {
  112.     mesStr[0] = "";
  113.     mesStr[1] = "";
  114.     mesStr[2] = "";
  116.     switch(selectStep) {
  117.     case 0:
  118.         mesStr[0] = "[はじめましょう]";
  119.         mesStr[1] = "画面をタップすると選択項目が出てくるので、";
  120.         mesStr[2] = "お好きな色や形を選んでください。";
  121.         break;
  123.     case 1:
  124.         mesStr[0] = "[ステップ 01/10]";
  125.         mesStr[1] = "背景色を選んでください。（左上４分の１）";
  126.         break;
  128.     case 2:
  129.         mesStr[0] = "[ステップ 02/10]";
  130.         mesStr[1] = "背景色を選んでください。（右上４分の１）";
  131.         break;
  133.     case 3:
  134.         mesStr[0] = "[ステップ 03/10]";
  135.         mesStr[1] = "背景色を選んでください。（左下４分の１）";
  136.         break;
  138.     case 4:
  139.         mesStr[0] = "[ステップ 04/10]";
  140.         mesStr[1] = "背景色を選んでください。（右下４分の１）";
  141.         break;
  143.     case 5:
  144.         mesStr[0] = "[ステップ 05/10]";
  145.         mesStr[1] = "中央円の大きさを選んでください。";
  146.         break;
  148.     case 6:
  149.         mesStr[0] = "[ステップ 06/10]";
  150.         mesStr[1] = "中央円の色を選んでください。";
  151.         break;
  153.     case 7:
  154.         mesStr[0] = "[ステップ 07/10]";
  155.         mesStr[1] = "四角形の位置を選んでください。";
  156.         break;
  158.     case 8:
  159.         mesStr[0] = "[ステップ 08/10]";
  160.         mesStr[1] = "四角形の色を選んでください。";
  161.         break;
  163.     case 9:
  164.         mesStr[0] = "[ステップ 09/10]";
  165.         mesStr[1] = "小円の位置を選んでください。";
  166.         break;
  168.     case 10:
  169.         mesStr[0] = "[ステップ 10/10]";
  170.         mesStr[1] = "小円の色を選んでください。";
  171.         break;
  173.     case 11:
  174.         mesStr[1] = "完成！！！！";
  175.         break;
  176.     }
  178.     //mesStr[2] = " " + cx + "," + cy + "," + bton; //debug
  179. }
  182. //エンブレムを条件に従って描画する--------------------
  183. function draw_Emblem() {
  185.     var xpos = 0;
  186.     var ypos = 0;
  188.     ctx.globalAlpha = 1;
  190.     //[STEP 01] 背景-左上
  191.     if(selectValue[1] > -1) {
  192.         set_Color(selectValue[1]);
  193.         ctx.fillRect(0, 100, 250, 250);
  194.     }
  196.     //[STEP 02] 背景-右上
  197.     if(selectValue[2] > -1) {
  198.         set_Color(selectValue[2]);
  199.         ctx.fillRect(250, 100, 250, 250);
  200.     }
  202.     //[STEP 03] 背景-左下
  203.     if(selectValue[3] > -1) {
  204.         set_Color(selectValue[3]);
  205.         ctx.fillRect(0, 350, 250, 250);
  206.     }
  208.     //[STEP 04] 背景-右下
  209.     if(selectValue[4] > -1) {
  210.         set_Color(selectValue[4]);
  211.         ctx.fillRect(250, 350, 250, 250);
  212.     }
  214.     //[STEP 05、06] 中央円
  215.     if(selectValue[5] > -1) {
  217.         var radius = 200;
  218.         if(selectValue[5] == 0 || selectValue[5] == 1 || selectValue[5] == 2) { radius = 270; }
  219.         if(selectValue[5] == 3 || selectValue[5] == 4 || selectValue[5] == 5) { radius = 180; }
  220.         if(selectValue[5] == 6 || selectValue[5] == 7 || selectValue[5] == 8) { radius =  90; }
  222.         ctx.beginPath();
  223.         ctx.arc(250, 350, radius, 0, Math.PI*2, true);
  225.         if(selectValue[6] == -1) {
  226.             //線のみ
  227.             ctx.stroke();
  228.         }
  229.         else
  230.         {
  231.             //塗りつぶしあり
  232.             set_Color(selectValue[6]);
  233.             ctx.fill() ;
  234.         }
  235.     }
  237.     //[STEP 07、08] 四角形
  238.     if(selectValue[7] > -1) {
  240.         if(selectValue[7] == 0 || selectValue[7] == 3 || selectValue[7] == 6) { xpos =   0; }
  241.         if(selectValue[7] == 1 || selectValue[7] == 4 || selectValue[7] == 7) { xpos = 166; }
  242.         if(selectValue[7] == 2 || selectValue[7] == 5 || selectValue[7] == 8) { xpos = 332; }
  244.         if(selectValue[8] == -1) {
  245.             //線のみ
  246.             ctx.strokeStyle = "rgb(0, 0, 0)";
  247.             ctx.strokeRect(xpos, 100, 166, 500);
  248.          }
  249.         else
  250.         {
  251.             //塗りつぶしあり
  252.             set_Color(selectValue[8]);
  253.             ctx.fillRect(xpos, 100, 166, 500);
  254.         }
  255.     }
  257.     //[STEP 09、10] 小丸
  258.     if(selectValue[9] > -1) {
  260.         switch(selectValue[9])
  261.         {
  262.             case 0: xpos =  83; ypos =  83; break;
  263.             case 1: xpos = 250; ypos =  83; break;
  264.             case 2: xpos = 417; ypos =  83; break;
  265.             case 3: xpos =  83; ypos = 250; break;
  266.             case 4: xpos = 250; ypos = 250; break;
  267.             case 5: xpos = 417; ypos = 250; break;
  268.             case 6: xpos =  83; ypos = 417; break;
  269.             case 7: xpos = 250; ypos = 417; break;
  270.             case 8: xpos = 417; ypos = 417; break;
  271.         }
  273.         ctx.beginPath();
  274.         ctx.arc(xpos, ypos+100, 80, 0, Math.PI*2, true);
  276.         if(selectValue[10] == -1) {
  277.             //線のみ
  278.             ctx.stroke();
  279.         }
  280.         else
  281.         {
  282.             //塗りつぶしあり
  283.             set_Color(selectValue[10]);
  284.             ctx.fill() ;
  285.         }
  286.     }
  288.     //外枠の描画
  289.     set_Color(0);
  290.     ctx.fillRect(0, 0, 500, 100);
  291.     ctx.globalAlpha = 1.0;
  292.     ctx.strokeStyle = "rgb(0, 0, 0)";
  293.     ctx.strokeRect(0, 100, 500, 500);
  294. }
  297. //メニューを表示する---------------------------------
  298. function draw_Menu() {
  300.     if(selectStep > 10) {
  301.         return;
  302.     }
  304.     ctx.globalAlpha = 0.8;
  306.     ctx.fillStyle = "rgb(255, 255, 255)";
  307.     ctx.fillRect(100, 200, 300, 300);
  308.     ctx.strokeStyle = "rgb(0, 0, 0)";
  309.     ctx.strokeRect(100, 200, 300, 300);		//外枠の描画
  311.     switch(selectStep) {
  312.     case 0:
  313.         ctx.fillStyle = "rgb(0, 0, 0)";
  314.         ctx.font = "22px 'ＭＳ Ｐゴシック'";	//表示フォントの設定
  315.         ctx.fillText("タッチしてください。", 170, 350);
  317.         break;
  319.     //色メニュー
  320.     case 1:
  321.     case 2:
  322.     case 3:
  323.     case 4:
  324.     case 6:
  325.     case 8:
  326.     case 10:
  327.         set_Color(0);
  328.         ctx.fillRect(100, 200, 100, 100);
  329.         set_Color(1);
  330.         ctx.fillRect(200, 200, 100, 100);
  331.         set_Color(2);
  332.         ctx.fillRect(300, 200, 100, 100);
  334.         set_Color(3);
  335.         ctx.fillRect(100, 300, 100, 100);
  336.         set_Color(4);
  337.         ctx.fillRect(200, 300, 100, 100);
  338.         set_Color(5);
  339.         ctx.fillRect(300, 300, 100, 100);
  341.         set_Color(6);
  342.         ctx.fillRect(100, 400, 100, 100);
  343.         set_Color(7);
  344.         ctx.fillRect(200, 400, 100, 100);
  345.         set_Color(8);
  346.         ctx.fillRect(300, 400, 100, 100);
  347.         break;
  349.     //大きさメニュー大中小
  350.     case 5:
  351.         ctx.strokeRect(100, 200, 300, 100);
  352.         ctx.strokeRect(100, 300, 300, 100);
  353.         ctx.strokeRect(100, 400, 300, 100);
  355.         ctx.fillStyle = "rgb(0, 0, 0)";
  356.         ctx.font = "36px 'ＭＳ Ｐゴシック'";	//表示フォントの設定
  357.         ctx.fillText("大", 232, 232+25);
  358.         ctx.fillText("中", 232, 332+25);
  359.         ctx.fillText("小", 232, 432+25);
  360.         break;
  362.     //位置メニュー左中右
  363.     case 7:
  364.         ctx.strokeRect(100, 200, 100, 300);
  365.         ctx.strokeRect(200, 200, 100, 300);
  366.         ctx.strokeRect(300, 200, 100, 300);
  368.         ctx.fillStyle = "rgb(0, 0, 0)";
  369.         ctx.font = "36px 'ＭＳ Ｐゴシック'";	//表示フォントの設定
  370.         ctx.fillText("左", 132, 332+25);
  371.         ctx.fillText("中", 232, 332+25);
  372.         ctx.fillText("右", 332, 332+25);
  373.         break;
  375.     //位置メニュー９か所
  376.     case 9:
  377.         for (var i=0; i<3; i++) {
  378.             for (var j=0; j<3; j++) {
  379.                 ctx.strokeRect(100 + j*100, 200 + i*100, 100, 100);
  380.             }
  381.         }
  383.         ctx.fillStyle = "rgb(0, 0, 0)";
  384.         ctx.font = "18px 'ＭＳ Ｐゴシック'";	//表示フォントの設定
  385.         ctx.fillText("左上", 132, 232+25);
  386.         ctx.fillText(" 上 ", 232, 232+25);
  387.         ctx.fillText("右上", 332, 232+25);
  389.         ctx.fillText(" 左 ", 132, 332+25);
  390.         ctx.fillText("中央", 232, 332+25);
  391.         ctx.fillText(" 右 ", 332, 332+25);
  393.         ctx.fillText("左下", 132, 432+25);
  394.         ctx.fillText(" 下 ", 232, 432+25);
  395.         ctx.fillText("右下", 332, 432+25);
  396.         break;
  397.     }
  399.     ctx.fillStyle = "rgb(255, 255, 255)";
  400.     ctx.globalAlpha = 1.0;
  401. }
  404. //色をセットする--------------------------------------
  405. function set_Color(num) {
  407.     switch(num) {
  408.     case 0:
  409.         ctx.fillStyle = "rgb(255, 255, 255)";
  410.         break;
  411.     case 1:
  412.         ctx.fillStyle = "rgb(128, 128, 128)";
  413.         break;
  414.     case 2:
  415.         ctx.fillStyle = "rgb(0, 0, 0)";
  416.         break;
  417.     case 3:
  418.         ctx.fillStyle = "rgb(255, 0, 0)";
  419.         break;
  420.     case 4:
  421.         ctx.fillStyle = "rgb(0, 255, 0)";
  422.         break;
  423.     case 5:
  424.         ctx.fillStyle = "rgb(0, 0, 255)";
  425.         break;
  426.     case 6:
  427.         ctx.fillStyle = "rgb(255, 255, 0)";
  428.         break;
  429.     case 7:
  430.         ctx.fillStyle = "rgb(0, 255, 255)";
  431.         break;
  432.     case 8:
  433.         ctx.fillStyle = "rgb(255, 0, 255)";
  434.         break;
  435.     }
  436. }
  439. //メニューを押しているかを調べる-----------------------
  440. function checkButtonOn() {
  442.     bton = 0;
  444.     //メニュー内のタッチチェック
  445.     if(cx > 100 && cx < 400 && cy > 200 && cy < 500) {
  447.         bton = parseInt((cx - 100) / 100) + parseInt((cy - 200) / 100) * 3;
  449.         selectValue[selectStep] = bton;
  451.         //選択ステップを進める
  452.         if(selectStep < 11) {
  453.             selectStep ++;
  454.         }
  455.     }
  456. }
  459. //ウィンドウを閉じる----------------------------------
  460. function MM_closeFloatWindow(theURL) {
  461.     window.close(this);
  462. }
  464.  
[ファイルのダウンロード]
emblemmaker.zip
サンプルを表示
ウィンドウを閉じる
トップに戻る