canvas绘画交叉波浪

最新推荐文章于 2021-09-30 08:13:18 发布

xiaozhen0610

最新推荐文章于 2021-09-30 08:13:18 发布

阅读量152

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2i01icb02hj.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

做个记录，自己写的动态效果，可能以后用的着呢；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas{
                margin: 0 auto;
                border: 1px solid #f98974;
                /*background: cornflowerblue;*/
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="200"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var speed = 0; wave = 20; level = Math.PI/200; wave2 = 20;
            ctx.translate(0,100);
            ctx.lineWidth = 3;
            function drawSin(speed,wave){ 
                ctx.beginPath();
                var gradient=ctx.createLinearGradient(0,0,500,0);
                gradient.addColorStop("0","magenta");
                gradient.addColorStop("0.9","skyblue"); 
                ctx.strokeStyle = "rgba(51,133,254,.7)"; 
                ctx.fillStyle = "rgba(237,107,3,.8)"; 
                ctx.moveTo(0,100); 
                for (var x=0; x<500; x++) {
                    var y = Math.sin(x*level+speed*2)*wave;
                    ctx.lineTo(x,y);
                }
                ctx.lineTo(500,100) 
//                ctx.stroke();
                ctx.fill();
            };
            function drawSin2(speed,wave){ 
                ctx.beginPath();
                ctx.strokeStyle = "yellow";
                ctx.fillStyle = "yellow"; 
                for (var x=0; x<500; x++) {
                    var y = Math.sin(x*level+speed+Math.PI/3)*wave;
                    ctx.lineTo(x,y);
                } 
                ctx.stroke();
                ctx.fill();
            };
            function drawSin3(speed,wave){ 
                ctx.beginPath();
                ctx.strokeStyle = "aliceblue";
                ctx.fillStyle = "rgba(237,107,3,.5)";
                ctx.moveTo(0,100);
                for (var x=0; x<500; x++) {
                    var y = Math.sin(x*level+speed*2+Math.PI/2)*wave2;
                    ctx.lineTo(x,y);
                }
                ctx.lineTo(500,100); 
//                ctx.stroke();
                ctx.fill();
            };
            setInterval(function(){
                speed++;  
                console.log(wave); 
                ctx.clearRect(0,-100,500,200); 
                drawSin(speed,wave);
//                drawSin2(speed,wave);
                drawSin3(speed,wave);
            },200); 
        </script>
    </body>
</html>

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘画交叉波浪

做个记录，自己写的动态效果，可能以后用的着呢；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #canvas{ margin: 0 auto;
复制链接

扫一扫