Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/08/08 (火)

canvasに図形を描画するよ!

| 23:37 | canvasに図形を描画するよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - canvasに図形を描画するよ! - 雪乃☆雫のなでしこ日和 canvasに図形を描画するよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 しかし、canvasって、何?!(っからか;)

 まず、「描画開始」命令の「描画先にCanvasを指定して描画API(2D)の利用準備する」とゆう説明からして分かりません;;

 描画系の命令を使うためには、とりあえず最初にこの「描画開始」で利用準備することが必要ラシイことは分かるのですが・・・

 ・・・と思っていたら、HTMLに<canvas>とゆうタグがあるのでした(バカ;)

 して、簡易エディタエラーメッセージによると、「描画を行うためには、HTML内にcanvasを配置し、idを振って『描画開始』命令に指定します。」とのこと。

 ソレを命令の説明の所にも書いて置いて欲しいの~~~。

 して、さらにもう一つ、落とし穴がありました。

 HTML内に、canvasを設置して、IDをつけたら、まずは、「DOM要素取得」です。

 しかるのちに、それへ「描画開始」とゆうことになります。

 ここが非常にわかりにくくて苦労しました。

 たぶん、Javascriptなどの分かっている方には、アレをやる代わりにコレか~・・・みたいな感じに、説明がなくともすんなり理解出来ることなのかも知れないんですが(?)なにしろ全体的に何も知らないので、さっぱりですヽ(;´Д`)ノ

 でも、コレさえ分かったら、後は意外とすんなり行きました。

 あと、canvasはなにも指定しないと、300*150くらいのサイズのようなので、widthとheightを設定してやります。

 でも・・・度はタートルグラフィックスの使い方が分からなんだ(+_+;

 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

 に記載の通りにタートルグラフィックスを使うのに必要プラグイン追加してみたけれど・・・なんか、うまくいかないんだよね。

 カメ作成しても出てこない

 まあ、それはまた後の課題として、描画で前同様バラを描くヤツ。

<!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>
    <!-- type="なでしこ" のスクリプトが実行される -->
    <script type="なでしこ">
      #--------------------------------------
      # ここになでしこのプログラムを記述
      #-----------------------------------------------------------
      「canvas#cv」のDOM要素取得。  #まずHTMLcanvasタグを設置し、IDを設定し、DOM要素取得。
      それへ描画開始。        #それを描画先に指定。
      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*QX2+XX),((-K)*QY2+YY)]から[(K*RX2+XX),((-K)*RY2+YY)]まで描画。
        [(K*RX2+XX),((-K)*RY2+YY)]から[(K*SX2+XX),((-K)*SY2+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てすと~canvasに図形を描く</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/02_canvas.html

ゲスト



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