Javascript 绘制 sin 曲线

最新推荐文章于 2018-07-09 01:06:30 发布

一刀不二

最新推荐文章于 2018-07-09 01:06:30 发布

阅读量2.2k

点赞数 1

分类专栏： [JavaScript] 文章标签： javascript

本文链接：https://blog.csdn.net/pandora_madara/article/details/38706345

版权

[JavaScript] 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #MyCanvas {
            background-color: cornflowerblue;
        }
    </style>
    <script type="text/javascript">
        function draw(){
            var my_canvas = document.getElementById( "MyCanvas" );
            var content = my_canvas.getContext( "2d" );
            content.beginPath();
            content.moveTo( 10, 100 );
            for( var i = 1; i < 200; i += 0.1 ){
                var x = i * 10;
                var y = Math.sin( i ) * 10 + 100;
                content.lineTo( x, y );
            }
            content.stroke();
            content.closePath();

        }
    </script>
</head>
<body οnlοad="draw()">
    <canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>

动态效果：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #MyCanvas {
            background-color: cornflowerblue;
        }
    </style>
    <script type="text/javascript">
        var i = 1;
        var x = 1;
        var y = 100;
        function moveSin(){
            var my_canvas = document.getElementById( "MyCanvas" );
            var content = my_canvas.getContext( "2d" );
            content.beginPath();
            content.moveTo( x, y );
            i += 0.1;
            x = i * 10;
            y = Math.sin( i ) * 10 + 100;
            content.lineTo( x, y );
            content.stroke();
            content.closePath();
        }
        setInterval( moveSin, 10 );
    </script>
</head>
<body οnlοad="moveSin()">
    <canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>

一刀不二

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Javascript 绘制 sin 曲线

#MyCanvas { background-color: cornflowerblue; } function draw(){ var my_canvas = document.getElementById( "MyCanvas" ); var content = my_c
复制链接

扫一扫