Как реализовать строки sineWaveTo squareWaveTo и sawWaveTo в контексте html5 canvas 2d? - PullRequest
Новая
       29

Как реализовать строки sineWaveTo squareWaveTo и sawWaveTo в контексте html5 canvas 2d?

0 голосов
/ 01 октября 2010

Я хотел бы попробовать реализовать их так, чтобы их можно было использовать способом, аналогичным lineTo ().Начиная с текущей точки, учитывая конечные координаты, функции будут рисовать квадратную, пильную или синусоидальную линию до конечных координат.

Я не знаю, можем ли мы учесть обаАмплитуда И Частота, потому что я предполагаю, что это вызовет проблемы с линией, фактически заканчивающейся в конечной точке, но вычисление частоты по расстоянию и амплитуде должно.

Амплитуда и Частота как параметры должны бытьвозможно, если мы отрегулируем частоту, пропорциональную расстоянию.

Пока что все, что я нашел, это примеры в ActionScript, и я не могу, кажется, специально подогнать их под неанимированную функцию рисования линий, как я хочук.

Любая помощь очень ценится, так что до сих пор я придумал целую кучу причудливых спиралей, но ничего близкого к цели.Я не большой любитель математики, так что добро пожаловать в псевдокод;)

Хахахахах, "значок вьюнок" ... метинки переполнили умственные стеки.

1 Ответ

2 голосов
/ 13 октября 2010

Попробуйте это для хорошей меры.Делает только грех (), но я уверен, что вы сможете выяснить все остальное.(Проверено только в Firefox, BTW.) 

<html>

<head>
<title>sin()</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" djConfig="parseOnLoad:true" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
<link rel="stylesheet" rev="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" type="text/css" />
<style type="text/css">
#id_canvas { border:5px solid gray }
</style>

<script type="text/javascript">

dojo.require( "dijit.form.VerticalSlider" );
dojo.require( "dijit.form.HorizontalSlider" );
dojo.require( "dijit.form.HorizontalRule" );
dojo.require( "dijit.form.VerticalRule" );
dojo.require( "dijit.form.HorizontalRuleLabels" );
dojo.require( "dijit.form.VerticalRuleLabels" );
dojo.require( "dojo.parser" );

function myHandler() {

    ctx.clearRect( 0, 0, 640, 480 );

    var amp = dijit.byId('slider2').attr("value");
    var period = 1/dijit.byId('slider1').attr("value");

    ctx.beginPath();
    ctx.moveTo(0, 240);
    for( i = 0; i <= 640; i++ ) {
        ctx.lineTo(i, 240 - Math.sin( (i / 640) / period ) * amp);
    }

    ctx.stroke();

}

var canvas = null;
var ctx = null;

dojo.addOnLoad( function() {
    canvas = document.getElementById('id_canvas');
    ctx = canvas.getContext('2d');

    myHandler();
});

</script>

<body class="claro">

<table class="bla">
<tr>
    <td><canvas id="id_canvas" width="640" height="480"></canvas></td>
    <td rowspan="2">
        <div dojoType="dijit.form.VerticalSlider" name="horizontal1"
            noValueIndicator="<span style='color:silver'>Click to edit</span>"
            onChange="myHandler()"
            value="100"
            minimum="-240"
            maximum="240"
            pageIncrement="100"
            showButtons="false"
            intermediateChanges="true"
            slideDuration="1"
            style="margin-left:40px; width:30px; height: 480px;"
            id="slider2"
        ></div>
    </td>
</tr>
<tr>
    <td colspan="2">
    <br/>
    <br/>
        <div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
            noValueIndicator="<span style='color:silver'>Click to edit</span>"
            onChange="myHandler()"
            value="6.28291"
            maximum="12.5663706"
            minimum="0"
            pageIncrement="100"
            showButtons="false"
            intermediateChanges="true"
            slideDuration="1"
            style="margin-left:40px; width:600px; height: 30px;"
            id="slider1"
        >
            <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=11 style="height:5px;"></div>
            <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:12px;">
                <li>0</li>
                <li>PI</li>
                <li>2PI</li>
                <li>3PI</li>
                <li>4PI</li>
            </ol>
        </div>
    </td>
</tr>
</table>

</body>

</html>

Похоже: alt text

...