Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/02 (土)

イベントを使うよ!

| 16:59 | イベントを使うよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - イベントを使うよ! - 雪乃☆雫のなでしこ日和 イベントを使うよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ3がバージョンアップして、イベントが使えるようになったので、早速お試ししてみます☆

 ついでに、前わからんと言ってた、スタイルシートも学んで、背景色の設定の仕方も分かった。

 実は、ワタシが違っていただけで、「background」は壁紙で、背景色は「bgcolor」だったとゆうオチだったんだけど(´д`;;;

 とっ、とにかく、そうゆうのは使うなとゆうことであるらしく、ちゃんとCSSで設定する術を覚えたので、それも活かしてこんなの。

 てゆうか前背景色を変えようとしたのは、単に、canvasの地色がどうやら白じゃなくて透明っぽいと気付いたので、それをちょこっと確認してみようとしただけだったんだけどねw

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと</title>
    <style id="bg" type="text/css">
        body {background-color: #FFCCCC;}
    </style>

    <title>なでしこ3てすと</title>
  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      「#a」の「onclick」に「ボタン選択」をDOMイベント設定。
      「#RGB」に「#FFCCCC」をDOMテキスト設定。

      ●ボタン選択
        背景色=16777215の乱数。背景色=背景色のHEXを6でゼロ埋め。
        「#bg」に「body {波カッコ}background-color: #{背景色};」をDOM_HTML設定。 #{波カッコ閉じ}が使えない。無くても動いたからいいけどΣ(゜д゜;
        「#RGB」に「#{背景色}」をDOMテキスト設定。
      ここまで。
    </script>

    <H1>なでしこ3てすと~ボタンをクリック</H1>
    <HR>
    <button id="a">背景色変更</button>
    <input id="RGB" type="text">
    <HR>
  </body>
</html>

 ボタンを押したら、ランダムに背景色が変わります。

 http://www.geocities.jp/snowdrops890/wnako3_test/04_button.html


 ところで、波カッコ閉じ」がつかえない~><; ←0.1.6で対応されました!(10/7追記)

 そういえば、前にも「カッコ」「波カッコ」はできるのに、「カッコ閉じ」「波カッコ閉じ」が、「undefined」となってしまうと騒いでいた気が;;;

 取りあえず、閉じなくてもちゃんと動いたからいいけど。

 (↑・・・それはともかく、DOMスタイル設定を使えばいいんじゃ?・・・ってことに最近気付いたよ・・・(バカ;)(9/20追記)


 そういえば、ボタンは押すに決まっているモノだけど、canvasなんかもonclickは使えるのかなー? と思って試してみたら、使えた!

 コレが出来ると、ちょっとゲームが作れそうな気がしてくるんじゃないですか?(喜)

 しかし、どうやら「DOMイベント設定」では、関数引数をつけては設定出来ないっぽいんだよね。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと~canvasをクリック</title>
    <style id="bg" type="text/css">
        body {background-color: #FFFFFF;}
    </style>

  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      色リスト=["FFEEEE","EEEEFF","EEFFEE","FFFFEE","FFEEFF","EEFFFF"]

      6
        C=回数-1。背景色=色リスト[C]
        「canvas#color{C}」のDOM要素取得。それへ描画開始。
        「#{背景色}」へ塗り色設定。[0,0,30,30]に四角描画。
//        「#color{C}」の「onclick」に「背景色選択({C})」をDOMイベント設定。 #関数引数をつけての設定は出来ない?
        「#color{C}」の「onclick」に「色ボタン押下{C}」をDOMイベント設定。
      ここまで。

      ●背景色選択(No)
        背景色=色リスト[No]
        「#bg」に「body {波カッコ}background-color: #{背景色};」をDOM_HTML設定。
      ここまで。

      ●色ボタン押下0
        背景色選択(0)
      ここまで。

      ●色ボタン押下1
        背景色選択(1)
      ここまで。

      ●色ボタン押下2
        背景色選択(2)
      ここまで。

      ●色ボタン押下3
        背景色選択(3)
      ここまで。

      ●色ボタン押下4
        背景色選択(4)
      ここまで。

      ●色ボタン押下5
        背景色選択(5)
      ここまで。
    </script>

    <H1>なでしこ3てすと~canvasをクリック</H1>
    <HR>
    <div id="a">
      <canvas id="color0" width="30" height="30"></canvas>
      <canvas id="color1" width="30" height="30"></canvas>
      <canvas id="color2" width="30" height="30"></canvas>
      <canvas id="color3" width="30" height="30"></canvas>
      <canvas id="color4" width="30" height="30"></canvas>
      <canvas id="color5" width="30" height="30"></canvas>
    </div>
    <HR>
  </body>
</html>

 どーなんですかこりゃwww

 でもまあ、とりあえず、押すとの色に変わる、やふーのトップページにあるみたいなヤツ。

 http://www.geocities.jp/snowdrops890/wnako3_test/04_canvas.html

 面倒だからしなかったけど、ローカルストレージを使えば、コレを覚えさせとくことも可能って訳ですね~。



 「onclick」に直接「背景色選択({C})」が設定できれば、とっても便利なように思われるんですけど・・・むむむ。

 てゆうか、だって、これにマウス入った時の処理もつけようとかなったら、当然、マウス出た時も必要だから・・・(´д`;

 ・・・それとも、なんかワタシが違ってるかにゃぁ・・・・・・;;;

 あるいは、他に何か、どれが押されたかを取得出来る上手い手があるのかしらん・・・


 あと、「DOM要素作成」などの命令が追加されたので、canvasも連番で動的に作成できるかなあと思ったんだけど・・・

 作成はできまして、「width」と「height」のDOMスタイル設定も出来て、連番のIDを使って、DOMイベント設定をして、押したら色が変わるようにまでは出来たんですけどね。

 なぜか、描画がおかしなコトになってしまうのですよ(?_?)

 どうやら、DOM要素作成した時点で、デフォルトの300*150のサイズで作成されてしまい、一旦作成した後は、変更しても変わるのは見た目だけで本当のサイズはかわらないっぽい。

 描画は、元のサイズの画像に行われて、それを「width」と「height」のサイズに拡縮して表示するだけなんだね。

 やっぱり、canvasはタグで、作成時に「width」と「height」を与えないとダメなのかも。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170902