我想在 HTML5 中使用鼠标指针在视频上绘图

发布于 2025-01-12 18:03:58 字数 3831 浏览 3 评论 0原文

目的是能够在暂停时使用鼠标移动在视频上书写。

我正在使用 HTML5 视频标签来播放视频。

我能够毫无问题地播放视频，除了播放视频之外，我还需要编写能够在视频暂停时在视频上绘制的内容，

我能够在画布上编写。但是当我在画布上有视频标签时，我无法查看我的任何绘图。

你能让我知道我做错了什么吗？

下面是代码：

<html>

<!-- <body onload="init()"> -->
<body> 
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
    </canvas>
    
    <video id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
    <source src="Test.mp4" type="video/mp4">
    </video>
    
</body>
    
<script type="text/javascript">
    
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    //# must await page load via JS (before using JS functions)...
    addEventListener("load", init );
    
    function init() 
    {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) { findxy('move', e)}, false);
        canvas.addEventListener("mousedown", function (e) { findxy('down', e) }, false);
        canvas.addEventListener("mouseup", function (e) { findxy('up', e)}, false);
        canvas.addEventListener("mouseout", function (e) { findxy('out', e)}, false);
    }

    function draw() 
    {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() 
    {
        var m = confirm("Want to clear");
        
        if (m) 
        {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() 
    {
        document.getElementById("canvasimg").style.border = "2px solid";
        
        //var dataURL = canvas.toDataURL();
        //document.getElementById("canvasimg").src = dataURL;
        
        document.getElementById("canvasimg").src = canvas.toDataURL();
        document.getElementById("canvasimg").style.display = "inline";
    }

    function findxy(res, e) 
    {
        if (res == 'down') 
        {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            
            if (dot_flag) 
            {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        
        if (res == 'up' || res == "out") 
        { flag = false; }
        
        if (res == 'move') 
        {
            if (flag) 
            {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    
    function color(obj) 
    {
        switch (obj.id) 
        {
            case "green": x = "green"; break;
            case "blue": x = "blue"; break;
            case "red": x = "red"; break;
            case "yellow": x = "yellow"; break;
            case "orange": x = "orange"; break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        
        if (x == "white") y = 14;
        else y = 2;

    }

</script>
    
</html>

原文

The aim is to able to write using mouse movement on video on pause.

I am using an HTML5 Video tag to play video.

I am able to play the video without any issue, apart from playing video I need to write able to draw on video on the pause of the video

I am able to write on canvas. But when I have a video tag in canvas, I am NOT able to view any of my drawings.

Can you please let me know, what I am doing wrong?

Below is the code:

<html>

<!-- <body onload="init()"> -->
<body> 
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
    </canvas>
    
    <video id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
    <source src="Test.mp4" type="video/mp4">
    </video>
    
</body>
    
<script type="text/javascript">
    
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    //# must await page load via JS (before using JS functions)...
    addEventListener("load", init );
    
    function init() 
    {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) { findxy('move', e)}, false);
        canvas.addEventListener("mousedown", function (e) { findxy('down', e) }, false);
        canvas.addEventListener("mouseup", function (e) { findxy('up', e)}, false);
        canvas.addEventListener("mouseout", function (e) { findxy('out', e)}, false);
    }

    function draw() 
    {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() 
    {
        var m = confirm("Want to clear");
        
        if (m) 
        {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() 
    {
        document.getElementById("canvasimg").style.border = "2px solid";
        
        //var dataURL = canvas.toDataURL();
        //document.getElementById("canvasimg").src = dataURL;
        
        document.getElementById("canvasimg").src = canvas.toDataURL();
        document.getElementById("canvasimg").style.display = "inline";
    }

    function findxy(res, e) 
    {
        if (res == 'down') 
        {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            
            if (dot_flag) 
            {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        
        if (res == 'up' || res == "out") 
        { flag = false; }
        
        if (res == 'move') 
        {
            if (flag) 
            {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    
    function color(obj) 
    {
        switch (obj.id) 
        {
            case "green": x = "green"; break;
            case "blue": x = "blue"; break;
            case "red": x = "red"; break;
            case "yellow": x = "yellow"; break;
            case "orange": x = "orange"; break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        
        if (x == "white") y = 14;
        else y = 2;

    }

</script>
    
</html>

分享到QQ

分享到微博