html 5 canvasプレビュー

+初めて書いた文章

😀表情は必要

大学でウェブサイトを作るという課題を受けた.
一度もやったことのない私への大きな試練...!
完成のために乱打する

目次

ページショートカット

図案

プレビュー

こうぞう

ポスト

📃project-drawing

一緒に受講したソンホ選手の計画通りに図案をもらった.

🔎project-preview

intro page

こうぞう

intro page

intro page는 처음 로딩시간에 보여지게 만들려고 하였으나
프로젝트 파일자체가 작고, 서버에서 처리하는게 없으니 로딩시간이 길지 않아  
일부러 setTimeout() 을 사용하여 시간을 4초 걸리게 하였다...😅

水滴シェイプのスクリーン上でのみ長方形を移動
流れる水のように見えます.

intro page

完全にコントロールできるAppClassを作成します.

        this.waveGroup = new WaveGroup();
        this.waterdrop = new Waterdrop(230, 1000, 30,'red',0);

中の水波と水玉が発生します.
まず、波はPointオブジェクトのセットからなり、
quadraticCurveToで波状に接続されています.
その後水滴が落ちた時、

の波高を0.1

に上げる

球の色を変え、

球

が次に入る液体の種類を設定します.

液体の種類は恥ずかしいが,集合ソート法を用いた.

let material = [
    //ball color
    [
        '<span class="water">●</span>water ',
        '<span class="coffeee">●</span>espresso ',
        '<span class="milk">○</span>milk ',
        '<span class="milkform">●</span>milkform ',
        '<span class="caramel">●</span>caramel ',
        '',
    ],
    //americano
    [
        '<span class="coffeee">●</span>espresso ',   '',   '',
        '<span class="water">●</span>water ',  '','','', '', '', '',
    ],
]

waveの色は、開始色と終了色を決定し、rgbを所望の色に分割する.
できました.

    for(let i=1;i<N;i++){
        tmpR=Math.round(r-(r-mr)/N*i);
        tmpG=Math.round(g-(g-mg)/N*i);
        tmpB=Math.round(b-(b-mb)/N*i);
        array.push(`rgb(${tmpR}, ${tmpG}, ${tmpB})`)
    }

ポスト

初めて作ったプロジェクトなので、コードも悪くて尊敬できません.
パスタコード🍝作成...
このプロジェクトを通じて、学習が必要な路線図を作成しました.
次に学ぶのは、Dev 21で猫検索サイトを作成することです.
各要素を再結合して、各機能を分離します.
作りたい!