Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/08/10 (木)

タートルグラフィックスをcanvasで使う!

| 14:20 | タートルグラフィックスをcanvasで使う! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - タートルグラフィックスをcanvasで使う! - 雪乃☆雫のなでしこ日和 タートルグラフィックスをcanvasで使う! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 前の課題の解決です。

 必要なのは、「カメ描画先」と「カメ画像URL」でした。


 まずは、

 https://nadesi.com/doc3/index.php?HTML%E3%81%B8%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95

 にあるとうり、プラグイン追加

<!-- タートルグラフィックスを使うのに必要プラグイン  -->
<script src="https://nadesi.com/v3/0.1.0/release/plugin_turtle.js"></script>

 して、「描画開始で」描画先に指定したcanvasのIDを、「カメ描画先」に指定します。

 そうすると、描画は行われるのですが、カメさんが出てきません。

 どうやら、PCや違うサイトから使おうとゆう場合は、「カメ画像URL」に画像のURLを指定してやる必要あるみたい。

 捜索の結果、カメさんは「https://nadesi.com/v3/0.1.0/demo/turtle.png」にいましたので、コレを指定します。

 もちろん、自分の好きなカメでもウサギでも、自分のトコに画像を用意してもいいわけですけどね。

 しかし、ワタシ個人的には、ナコ様に描いて欲しいなぁ・・・

 これは勝手に使うと問題がありそうだから、公式サイトで用意してくれないかなぁwww


 ・・・それはともかく、んなこんなでこんな感じ。

 面倒なので、描くモノは相変わらず同じです;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>なでしこ3てすと</title>
  </head>

  <body>
    <!-- なでしこを使うために必要なスクリプト -->
    <script src="https://nadesi.com/v3/0.1.0/release/wnako3.js?run"></script>
    <!-- タートルグラフィックスを使うのに必要プラグイン  -->
    <script src="https://nadesi.com/v3/0.1.0/release/plugin_turtle.js"></script>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      「canvas#cv」のDOM要素取得。  #まずHTMLcanvasタグを設置し、IDを設定し、DOM要素取得。
      それへ描画開始。        #それを描画先に指定。
      カメ描画先=「cv」       #カメ描画先は、canvasのIDを指定する。
      カメ画像URL=「https://nadesi.com/v3/0.1.0/demo/turtle.png」  #ここにカメさんがいる!
      カメ作成。
      5に太設定。
      K=150。XX=155。YY=155。
      PX=1。PY=1。QX=-1。QY=1。RX=-1。RY=-1。SX=1。SY=-1。
      C=200
      8
        色=RGB(255,C,C)。C=C-20。
        色にカメペン色設定。
        PX2=PXとQXの中点。PY2=PYとQYの中点。
        QX2=QXとRXの中点。QY2=QYとRYの中点。
        RX2=RXとSXの中点。RY2=RYとSYの中点。
        SX2=SXとPXの中点。SY2=SYとPYの中点。
        [(K*PX2+XX),((-K)*PY2+YY)]へカメ起点移動。
        [(K*QX2+XX),((-K)*QY2+YY)]へカメ移動。
        [(K*RX2+XX),((-K)*RY2+YY)]へカメ移動。
        [(K*SX2+XX),((-K)*SY2+YY)]へカメ移動。
        [(K*PX2+XX),((-K)*PY2+YY)]へカメ移動。
        PX=PX2。PY=PY2。QX=QX2。QY=QY2。RX=RX2。RY=RY2。SX=SX2。SY=SY2。
      ここまで。
      カメ非表示。

      ●中点(AとBの)
        (A+B)/2で戻るここまで。
    </script>

    <H1>なでしこ3てすと~タートルグラフィックスを使う</H1>
    <HR>
    <FONT color="red">
    <H2>カメさんがバラを描く</H2>
    <canvas id="cv" width=320 height=320></canvas>
    <HR>
  </body>
</html>

 できた!

http://www.geocities.jp/snowdrops890/wnako3_test/wnako3_test02_turtle.html

 そうして、これならcanvasのサイズは自分で好きに変えられるから、広々としたところでのびのびとカメさんを歩かすことが出来るわけですね~♪

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