ansaurus

Question

How to implement sineWaveTo squareWaveTo and sawWaveTo lines in html5 canvas 2d context?

Answer 1

+1 A:

Try this for good measure. Does only sin(), but, I'm sure you'll be able to figure out the rest. (Tested only in 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"&gt;&lt;/script&gt;
<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>

Looks like: alt text

pp19dd 2010-10-13 03:17:53

ansaurus

tags:

views:

answers:

How to implement sineWaveTo squareWaveTo and sawWaveTo lines in html5 canvas 2d context?

related questions