Canvas (2) - Githubissues

goldEli commented 4 years ago

基于 Canvas (1) 的代码，让圆跟随鼠标移动动。（附上代码）

效果如下：

ezgif com-optimize

FireDragonZL commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现canvas图像跟随鼠标光标移动</title>
</head>
<body>
    <!--
        思路：
        1.创建canvas图形；
        2.获取canvas图形对象；
        3.对象绑定鼠标移动事件，获取当前坐标；
        4.根据当前坐标重新生成canvas图形
            4.1 删除canvas区域；
            4.2 绘制canvas图形。
        注意：添加是否在画布内部的判断
    -->
    <canvas id="canvas" width="500px" height="500px"></canvas>

    <script>
        // 获取canvas的DOM对象
        var canvas = document.getElementById("canvas");
        canvas.style.backgroundColor = "darkgrey";
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "red";
        // canvas图形的位置信息
        var offSet_X;
        var offSet_Y;
        var r;
        // canvas图形是否在画布内部
        var inSide;

        // 定时器，持续获取canvas中图形的最新状态
        setInterval(function(){
            if(inSide === true){
                createCanvas(offSet_X, offSet_Y, r);
                console.log("welcome");
            }
            createCanvas(offSet_X, offSet_Y, r);
        } , 50)

        // 生成canvas对象
        function createCanvas(x, y, r){
            //ctx.save();
            // 清空画布区域
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 初始化canvas的图形位置
            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2);
            ctx.fill();
            //ctx.restore();
        }

        // 绑定鼠标移动事件，获取当前最新的位置信息
        document.onmousemove = function (event) {
            offSet_X = event.clientX;
            offSet_Y = event.clientY;
            if(offSet_X>0 && offSet_X<canvas.width && offSet_Y>0 && offSet_Y<canvas.height){
                inSide = true;
                r = 50;
            } else {
                inSide = false;
                r = 0;
            }
        }
    </script>
</body>
</html>

lurasso commented 4 years ago

<canvas id="canvas" height="600" width="1000"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext('2d');
        var x =400 , y =300;
        ctx.fillStyle = 'red';
        setInterval(function(){
            ctx.beginPath();
            ctx.clearRect(0, 0, 1000, 600)
            ctx.arc(x,y,10,0,Math.PI*2)
            ctx.fill();
    },30);
        canvas.onmousemove = function( e ){
            x = e.offsetX;
            y = e.offsetY;
        }

    </script>

748580573 commented 4 years ago

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <canvas id="myCanvas" width="1000" height="1000" style="border: 1px solid #000000;"></canvas>
</body>

<script>
    var c = document.getElementById("myCanvas");
    document.onmousemove = function (event) {
        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, c.width, c.height);
        var posX = 0,
            posY = 0;
        var e = event || window.event;
        if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值
            posX = e.pageX;
            posY = e.pageY;
        } else if (e.clientX || e.clientY) {
            posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(posX, posY, 50, 0, Math.PI * 2);
        ctx.stroke();
        ctx.fill();
    }
</script>

</html>

goldEli / Front-End-Training

Canvas (2) #27