0

我想尝试实现这些，以便可以以类似于 lineTo() 的方式使用它们。从当前点开始，给定结束坐标，函数将绘制一条正方形、锯齿线或正弦线，一直到结束坐标。

我不知道我们是否可以同时考虑幅度和频率，因为我猜这会导致线路实际上在终点完成，但应该从距离和幅度计算频率。

假设我们调整与距离成比例的频率，幅度和频率作为参数应该是可能的。

到目前为止，我发现的只是 ActionScript 中的示例，我似乎无法像我想要的那样将它们专门用于非动画线条绘制功能。

非常感谢任何帮助，到目前为止，我已经想出了各种时髦的螺旋，但没有接近目标。我不是一个数学爱好者，所以欢迎使用伪代码；）

哈哈哈，“风滚草徽章”……我想得满脑子都是。

4

1 回答 1

2

试试这个。只做 sin()，但是，我相信你能弄清楚其余的。（仅在 Firefox 中测试，顺便说一句。）

<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>

好像：替代文字

于 2010-10-13T03:17:53.033 回答