js canvas扫描仪动画

最新推荐文章于 2024-08-12 10:54:54 发布

Garon_InE

最新推荐文章于 2024-08-12 10:54:54 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： canvas javascript 动画扫描仪 js

本文链接：https://blog.youkuaiyun.com/qq_22253823/article/details/54279099

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文将介绍如何利用JavaScript和HTML5的Canvas元素创建一个逼真的扫描仪动画效果。通过结合canvas的绘图API，我们可以模拟扫描过程，让网页元素仿佛正在被扫描。内容包括扫描线的移动、渐变效果以及如何同步动画与用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<body>
    <div style="text-align: center;">
        <canvas id="earth" style="border: 1px #ccc solid;"></canvas>
        <input type="button" value="start" onClick="doStart();"/>
        <input type="button" value="stop" onClick="doStop();"/>

    </div>

    <script type="text/javascript">

    var valTool = new Object();
    valTool.flag = false;
    valTool.scale = 0.5;

    initTurnEarth(valTool);

    function doStart()
    { 
        valTool.flag = true;
        initTurnEarth(valTool);
    }

    function doStop()
    { 
        valTool.flag = false;
    }

    function initTurnEarth(valTool)
    {
        var mycv = document.getElementById("earth"); 
        var dr = mycv.getContext("2d");

        var earth = new Object();
        earth.img = new Image();
        earth.img.src = "img/earth.png"; 

        var search = new Object();
        search.img = new Image();
        search.img.src = "img/earth_search.png"; 

        mycv.width = earth.img.width * valTool.scale;
        mycv.height = earth.img.height * valTool.scale;  

        earth.x = 0;
        earth.y = 0;
        search.x = 117;
        search.y = 6;

        valTool.degree = 0;
        valTool.speed = 5;

        doTurnEarth(valTool,dr,earth,search);
    }

    function doTurnEarth(valTool,dr,earth,search)
    {
        valTool.degree =  valTool.degree +  valTool.speed;
        if ( valTool.degree > 360) { valTool.degree = 0};

        //清空
        dr.clearRect(0,0,earth.img.width,earth.img.height);
        dr.save();

        //缩放画布
        dr.scale(0.5,0.5);

        dr.drawImage(earth.img,earth.x,earth.y);

        //画点
        if(valTool.degree > 0 && valTool.degree < 30 )
        {
            dr.beginPath();
            dr.arc(earth.img.width/2+search.img.width/2, search.img.height/2, 3, 0, Math.PI*2);
            dr.closePath();
            dr.fillStyle = "white";
            dr.fill();
        }

        //偏移-旋转-回到中心
        dr.translate((search.x),(search.y + (search.img.height)));
        dr.rotate( valTool.degree * 2 * Math.PI / 360);
        dr.translate(-(search.x),-(search.y + (search.img.height)));

        dr.drawImage(search.img,search.x,search.y);

        //回到上一个状态
        dr.restore();

        if(valTool.flag)
        {
            setTimeout(function(){ doTurnEarth(valTool,dr,earth,search);},60); 
        }
    }
</script>
</body>
</html>