如何在 html5 canvas 2d 上下文中实现 sineWaveTo squareWaveTo 和 sawWaveTo 线？

发布于 2024-09-26 06:48:36 字数 388 浏览 5 评论 0原文

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

~~我不知道我们是否可以同时考虑幅度和频率，因为我猜这会导致线条实际在终点结束时出现问题，但应该根据距离和幅度计算频率。~~

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

到目前为止，我发现的只是 ActionScript 中的示例，而且我似乎无法像我想要的那样将它们专门适合非动画线条绘制函数。

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

哈哈哈，“风滚草徽章”……我认为已经溢出了心理堆栈。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南巷近海 2024-10-03 06:48:37

尝试一下这个方法。只执行 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>

看起来像： alt text

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: alt text

回复收藏 0 原文

~没有更多了~