Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.09.2019, 04:18   #1
Pro100blich
 
Регистрация: 02.12.2014
Сообщений: 5
Восклицание JavaScript: HTML5 Canvas

Всем здравствуйте нужна помощь Ваша, дорогие коллеги. Имеется программа Бабочку Хофштадтера, при масштабирования она не изменяется по ширине и длине, не знаю как исправить это. Если посмотреть на border черный то будет понятнее.


Если мы меняем размер то правый бар меняет размер (vw), а бабочка сама нет.

Код:
<!DOCTYPE html>
<html>
 
<head>
    <title>Бабочку Хофштадтера</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="script.js"></script>
</head>
 
<body>
    <div class="main">
        <canvas id="theCanvas" height="500" width="500"></canvas>
        <div id="rightBar">
            <h1>Бабочку Хофштадтера</h1>
            <form>
                <div class="Buttons">
                    <button id="startButton" onclick="start();" type="button">Старт</button>
                    <button id="stopButton" onclick="stop();" type="button">Стоп</button>
                </div>
                <div class="values">
                    <label for="qValue">
                        <p>q:</p>
                    </label>
                    <span id="qValue">0</span>
                </div>
            </form>
        </div>
    </div>
</body>
 
</html>
Код:
var keepRunning = true;
var canvas, ctx, w, h;
var q = 4,
    qmax = 280;
var MAXX, MAXY;
 
// flip x, y
function drawPoint(x, y) {
    // console.log('drawPoint(', x, y, ')');
    ctx.beginPath();
    ctx.fillRect(y, x, 1, 1);
    ctx.stroke();
}
 
function next() {
    $('#qValue').text(q);
    // puffer=createImage(getSize().width,getSize().height);
    // puffer=createImage(600,500);
    // pufferG=puffer.getGraphics();
    // Increase qmax for greater detail, at the expense of more time.
    var p, i, j, ie, n, nalt = 0,
        m, neu;
    var sigma, e, polyalt, poly, polyneu;
    var doubleCosSigma, doubleCosSigmaQ_2, invQ = 1.0 / q;
 
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    // pufferG.setColor(Color.black);
    // for q=2 the points (eigenvalues) are explicitly drawn
 
    for (p = 1; p < q; p += 2) {
        if (gcd(p, q) > 1) continue;
        sigma = 2.0 * Math.PI * p * invQ;
        // optimize by caching 1/q, cos(sigma), etc.
        // Is there a trig identity that will help us optimize cos(sigma * m)?
        // I don't think so, except where m=2.
        doubleCosSigma = 2.0 * Math.cos(sigma);
        doubleCosSigmaQ_2 = 2.0 * Math.cos(sigma * q * 0.5);
        nalt = 0;
        for (ie = 0; ie < MAXY + 2; ie++) {
            e = 8.0 * ie / MAXY - 4.0 - 4.0 / MAXY;
            n = 0;
            /* odd wavefunctions  */
            polyalt = 1.0;
            poly = doubleCosSigma - e;
            if (polyalt * poly < 0.0) n++;
            for (m = 2; m < q / 2; m++) {
                polyneu = (2.0 * Math.cos(sigma * m) - e) * poly - polyalt;
                if (poly * polyneu < 0.0) n++;
                polyalt = poly;
                poly = polyneu;
            }
            polyalt = 1.0;
            poly = 2.0 - e;
            if (polyalt * poly < 0.0) n++;
            polyneu = (doubleCosSigma - e) * poly - 2.0 * polyalt;
            if (poly * polyneu < 0.0) n++;
            polyalt = poly;
            poly = polyneu;
            for (m = 2; m < q / 2; m++) {
                polyneu = (2.0 * Math.cos(sigma * m) - e) * poly - polyalt;
                if (poly * polyneu < 0.0) n++;
                polyalt = poly;
                poly = polyneu;
            }
            polyneu = (doubleCosSigmaQ_2 - e) * poly - 2.0 * polyalt;
            if (poly * polyneu < 0.0) n++;
            /* even wavefunctions  */
            polyalt = 1.0;
            poly = 2.0 - e;
            if (polyalt * poly < 0.0) n++;
            polyneu = (doubleCosSigma - e) * poly - 2.0 * polyalt;
            if (poly * polyneu < 0.0) n++;
            polyalt = poly;
            poly = polyneu;
            for (m = 2; m < q / 2; m++) {
                polyneu = (2.0 * Math.cos(sigma * m) - e) * poly - polyalt;
                if (poly * polyneu < 0.0) n++;
                polyalt = poly;
                poly = polyneu;
            }
            polyneu = (doubleCosSigmaQ_2 - e) * poly - 2.0 * polyalt;
            if (poly * polyneu < 0.0) n++;
 
            if (n > nalt) {
                // if(neu==1) {g.drawImage(puffer,0,0,this);neu=0;}
                drawPoint(MAXX * p * invQ, MAXY - ie);
                // pufferG.drawLine(MAXX*p/q,MAXY-ie,MAXX*p/q,MAXY-ie);
            }
            nalt = n;
        }
    }
    // TODO: drawString("q= " + q);
 
    q += 2;
    if (keepRunning && q <= qmax) {
        // stop and give UI a chance to catch up, between iterations of q
        window.setTimeout(next, 1);
    }
}
 
function start() {
    canvas = document.getElementById('theCanvas');
    ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    w = canvas.scrollWidth;
    h = canvas.scrollHeight;
    MAXX = w;
    MAXY = h;
 
    drawPoint(MAXX / 2, MAXY * (1 - (4 + Math.sqrt(8)) / 8));
    drawPoint(MAXX / 2, MAXY * (1 - (4 - Math.sqrt(8)) / 8));
 
    q = 4;
    keepRunning = true;
    window.setTimeout(next, 2);
}
 
function stop() {
    keepRunning = false;
}
 
function gcd(a, b) {
    if (b == 0) return a;
    return gcd(b, a % b);
}
Код:
* {
    margin: 0;
    padding: 0;
 
}
 
body {
    max-width: 100%;
    background-color: #d4d4d4;
 
}
 
.main {
    width: 58vw;
    display: flex;
    margin: 1vw auto;
    border: 5px solid black;
}
 
canvas {
    margin: ;
    border: 2px solid red;
 
}
 
#rightBar {
    width: 20vw;
    background-color: #a6c5ff;
    border: 1px solid blue;
}
 
h1 {
    font-size: 1.5vw;
    text-align: center;
}
 
.Buttons {
 
    width: 15vw;
    display: flex;
    margin: 1vw auto;
    text-align: center;
 
 
}
 
#startButton {
    margin-right: 60px;
    border: 0 solid red;
    width: 6vw;
    display: flex;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1vw;
    background: #6530ff;
    padding: 0.2vw 0.1vw 0.1vw 1.4vw;
    transition: .3s cubic-bezier(0.2, 0, 1, 1);
 
 
}
 
#startButton:hover {
    background: #B69EFC;
    padding: 0.2vw 0.1vw 0.1vw 1.4vw;
    border-radius: 1vw;
    font-size: 1vw;
}
 
#stopButton {
    border: 0 solid red;
    width: 6vw;
    display: flex;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1vw;
    background: #6530ff;
    padding: 0.2vw 0.1vw 0.1vw 1.6vw;
    transition: .3s cubic-bezier(0.2, 0, 1, 1);
}
 
#stopButton:hover {
    background: #B69EFC;
    padding: 0.2vw 0.1vw 0.1vw 1.6vw;
    border-radius: 1vw;
    font-size: 1vw;
}
 
.values {
    display: flex;
    font-size: 1.5vw;
    width: 3vw;
    margin: 0 auto;
}
Pro100blich вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работа с Canvas HTML5 (примеры) Arigato JavaScript, Ajax 25 18.01.2021 11:45
javascript и html5 Alexygen Фриланс 1 07.06.2017 21:54
HTML5 - свой шрифт в Canvas'е ruN00b HTML и CSS 2 30.10.2013 15:36
Разработать i-frame приложение в социальной сети ВКонтакте, используя html5 тег <canvas>. GReise HTML и CSS 3 06.01.2013 16:09