关于javascript:js-绘制sin波浪线

45次阅读

共计 885 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html>
<head>
    <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,y);
                }
                content.stroke();
                content.closePath();}
    </script>
</head>
<body onload="draw()">
<canvas id = "MyCanvas" width="500" height="400"></canvas>
</body>
</html>

正文完