var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 监听接收到的数据 socket.on("mydata", (msg) => { // 解析数据 var data = JSON.parse(msg); // 绘制密码表 for (var i = msg; i < data .length; i++) { var obj = data[i]; var x = obj.xmin * canvas.width; var y = obj.ymin * canvas.height; var w = (obj.xmax - obj.xmin) * canvas .width; var h = (obj.ymax - obj.ymin) * canvas.height; ctx.strokeRect(x ,y, w, h); } }); </script>yolov5目标识别别在前端显示，canvas画框报错Uncaught (in promise) SyntaxError: "[object Object]" is not valid JSOn写出修改后的代码

根据您提供的代码，可能是因为for循环中的msg变量应该是data.length，而不是msg。同时，最后一行的代码应该是</script>而不是</script>yolov5目标识别别在前端显示，这可能是造成语法错误的原因。以下是修改后的代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 监听接收到的数据
socket.on("mydata", (msg) => {
    // 解析数据
    var data = JSON.parse(msg);

    // 绘制密码表
    for (var i = 0; i < data.length; i++) {
        var obj = data[i];
        var x = obj.xmin * canvas.width;
        var y = obj.ymin * canvas.height;
        var w = (obj.xmax - obj.xmin) * canvas.width;
        var h = (obj.ymax - obj.ymin) * canvas.height;
        ctx.strokeRect(x, y, w, h);
    }
});
</script>

相关问题

// 获取canvas对象 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 监听接受到的数据 socket.on("mydata", (msg) => { // 解析数据 var data = JSON.parse(msg); // 绘制识别框 for (var i = 0; i < data.length; i++) { var obj = data[i]; var x = obj.xmin * canvas.width; var y = obj.ymin * canvas.height; var w = (obj.xmax - obj.xmin) * canvas.width; var h = (obj.ymax - obj.ymin) * canvas.height; ctx.strokeRect(x, y, w, h); } });前端控制台报错Uncaught (in promise) SyntaxError: "[object Object]" is not valid JSON

根据你提供的代码，报错可能是由于接收到的数据不是有效的 JSON 格式导致的。你可以在接受数据前使用 try-catch 语句捕获异常，或者使用 JSON.stringify() 方法将数据转换为 JSON 格式再发送。同时，建议在后端发送数据时，使用 JSON.stringify() 方法将数据转换为 JSON 格式，以确保数据格式的正确性。

<canvas id="canvas" width="800" height="800"></canvas> <hr> <div style="text-align: center"> <video id="girl" controls src="../img/girl.mp4"></video> <button id="start_end">▶</button> </div> <script> let canvas = document.getElementById("canvas") canvas.style.border = "1px solid red" var ctx = canvas.getContext("2d"); let x = canvas.width, y = canvas.height let gl = document.getElementById("girl"); gl.style.height = "400px" var btn = document.getElementById("start_end"); let status=0; btn.addEventListener("click", function () { if( gl.paused){ gl.play() btn.innerText= '||' btn.style.fontWeight='800' render() }else{ gl.pause() btn.innerText='▶' console.log("关闭：",status) cancelAnimationFrame(status) } }) gl.onended=function (){ //console.log("播放完了") btn.innerText='▶' cancelAnimationFrame(status) } render() function render(){ // var img_y = /\d+/.exec(gl.style.height||100); var img_y = gl.clientHeight var img_x = gl.clientWidth // console.log(img_x,img_y) ctx.drawImage(gl,0,0,img_x*y/img_y,y) status = requestAnimationFrame(render) console.log("status:",status) } </script>

这段代码实现了一个 Canvas 动画，使用 HTML5 的 `<video>` 元素作为动画的源。在每一帧动画中，获取 `<video>` 元素的当前图像并绘制到 Canvas 上，从而实现视频动画的效果。同时，添加了一个按钮，可以控制视频的播放和暂停，以及动画的开始和结束。在暂停或播放结束时，使用 `cancelAnimationFrame` 函数停止动画的渲染。