js绘制sin曲线(波浪线)

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

js绘制sin曲线(波浪线)_第1张图片


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

你可能感兴趣的:(前端)