js绘制sin曲线（波浪线）

最新推荐文章于 2024-04-02 22:24:34 发布

_let

最新推荐文章于 2024-04-02 22:24:34 发布

阅读量7.6k

点赞数

分类专栏：前端文章标签： javascript

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文转载自：http://blog.csdn.net/pandora_madara/article/details/38706345

这里写图片描述

<!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 = 200;
//        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 ) * 20 + 200;
//            content.lineTo( x, y );
//            content.stroke();
//            content.closePath();
//            console.log(x);
//            if(x>=1000){
//                console.log("end");
//                window.clearInterval(myTime);
//            }
//        }
//        var myTime =  setInterval( moveSin, 10 );

        function draw(){
            var my_canvas = document.getElementById( "MyCanvas" );
            var content = my_canvas.getContext( "2d" );
            content.beginPath();
            content.moveTo( 1, 100 );
            for( var i = 1; i < 100; i += 0.1 ){ // x 应该等于canvas的 width/10
                var x = i * 10;
                var y = Math.sin( i ) * 10 + 100;
                content.lineTo( x, y );
                console.log(x);
            }
            content.stroke();
            content.closePath();

        }
    </script>
</head>
<body onload="draw()">
<canvas id = "MyCanvas" width="1000" height="400"></canvas>
</body>
</html>