canvas 实现人物移动轨迹

路光.

于 2023-12-11 10:30:26 发布

阅读量926

点赞数 21

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_41429765/article/details/134916049

版权

/**
 * 实现人物移动的几个条件
 * 开始 人物移动
 * 暂停  停止
 * 坐标点
 * 开始（0，0）
 * 结束（300，350）
 * */ 

window.onload=function(){
    var arr=[{x:0,y:0},{x:100,y:200}];//行驶坐标点
    var speed=2,timer,flag=false;//速度
    var canvas=document.getElementById('myCanvas')
    //获得CanvasRenderingContext2D 对象，该对象提供基本的绘图命令
    var ctx=canvas.getContext('2d')
    // var img=document.getElementById('img')//添加的图片
    //图片预加载
    var img=new Image();
    img.src='person.png';
    img.onload=function(){
        ctx.drawImage(img,arr[0].x,arr[0].y,30,30)
    }
    //单击事件
    document.querySelector('.play').onclick=function(){play()}
    document.querySelector('.stop').onclick=function(){stop()}
    //定时器 开始
    function play(){
        if(flag)return;
        timer=setInterval(draw,100)
        flag=true;
    }
    function stop(){
        clearInterval(timer);
        flag=false;
    }
    //绘制路径
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height)//清除画布内容
        if(arr[0].x<arr[1].x){
            arr[0].x+=speed;
        }
        if(arr[0].y<arr[1].y){
            arr[0].y+=speed;
        }
        ctx.drawImage(img,arr[0].x,arr[0].y,30,30)
        //行驶的轨迹
        ctx.lineTo(arr[0].x,arr[0].y);//画点
        ctx.stroke();
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: #333;
        }
    </style>
    <script src="index.js"></script>
</head>
<body>
    <div>
        <canvas id="myCanvas" width="600" height="370">
            您的浏览器不支持canvas.
        </canvas>
        <a href="javaScript:;" class="btn play">开始</a>
        <a href="javaScript:;" class="btn stop">暂停</a>
        <!-- <img src="img/person.png" alt=""> -->
    </div>
</body>
</html>