码迷,mamicode.com
首页 > 其他好文 > 详细

正弦动态绘图

时间:2016-09-16 17:05:14      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

主要应用 setInterval

 技术分享

<!DOCTYPE html>
<html>
<head>
    <title>sin动态绘图</title>
    <style type="text/css">
        canvas{border: dashed 2px #ccc;}
    </style>
</head>
<body>
    <input type="button" id="btn" value="绘图">
    <canvas id="can" width="800" height="600"></canvas>
    
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }

        var can = $$(can);
        var cans = can.getContext(2d);

        var animation_interval = 10;
        var n = 720; 
           var s=0;
        cans.beginPath();
        // cans.moveTo(0,0);
        var animation = function () {
            if(s<n){
                y=-100*Math.sin(Math.PI/180*s)+200;
                cans.lineTo(s,y);
                cans.lienWidth=3;
                cans.strokeStyle="red";
                cans.stroke();
                s++;
            }else {
                clearInterval(varName);
            }
        };

        setInterval(animation, animation_interval);
    </script>
</body>
</html>

 

正弦动态绘图

标签:

原文地址:http://www.cnblogs.com/xlive/p/5876610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!