How to implement sineWaveTo squareWaveTo and sawWaveTo lines in html5 canvas 2d context?
I would like to try an implement these so that they can be used in a manner similar to lineTo(). Starting from the current point, given the ending coordinates the functions would draw either a square, saw, or sine line all the way to the the ending coordinates.
I dont know if we can factor in both Amplitude AND Frequency because I guess it would cause problems with the line actually finishing on the ending point but calculating frequency from distanc开发者_运维百科e and amplitude should.
Amplitude and Frequency as parameters should be possible, assuming we adjust the frequency proportional to the distance.
So far, all i've found is examples in ActionScript and I cant seem to purpose-fit them to a non-animated line drawing function like I want to.
Any help is greatly appreciated, so far I've come up with whole sorts of funky spirals but nothing close to the goal. I'm not much of a math buff so pseudo code welcome ;)
Hahahah, "tumbleweed badge"... methinks overflowed the mental stacks.
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"></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>
Looks like:
加载中,请稍侯......
精彩评论