当前位置：首页 > news >正文

canvas的画布尺寸

news 2026/3/26 17:08:11

这个设置的是canvas的画布尺寸

canvas.width = myVideo.videoWidth || 900; // 视频原生宽度

canvas.height = myVideo.videoHeight || 500; // 视频原生高度

这个设置的是canvas html 元素在页面上显示的尺寸

canvas.style.width = "900px"; // 保持显示尺寸

canvas.style.height = "500px"; // 保持显示尺寸

当canvas的画布尺寸（像素尺寸）过小的时候，画面就会很模糊

下面是使用canvas复制video画面的一个demo

<html> <head> <meta charset="UTF-8"> <link rel="icon" type="image/png" href="webrtc.png" /> <script src="webrtcconfig.js" ></script> <script src="webrtcstreamer.js" ></script> </head> <body> <!-- muted 静音播放 --> <!-- iOS 需要 playsinline 和 muted 才能自动播放 --> <!-- <video autoplay muted playsinline></video> --> <video id="my-video" style="width: 900px; height: 500px;" muted ></video> <canvas id="displayCanvas" style="width: 900px; height: 500px;"></canvas> </body> <script> const myVideo = document.getElementById('my-video'); const canvas = document.getElementById('displayCanvas'); const ctx = canvas.getContext('2d'); window.onload = function() { this.webRtcServer = new WebRtcStreamer("my-video", webrtcConfig.url); this.webRtcServer.connect("a12-篮球场-东北角", "", webrtcConfig.options); // setTimeout(()=>{ // console.log('=== 分辨率诊断 ==='); // console.log('Video 视频尺寸:', myVideo.videoWidth, '×', myVideo.videoHeight); // console.log('Video 显示尺寸:', myVideo.clientWidth, '×', myVideo.clientHeight); // console.log('Canvas 像素尺寸:', canvas.width, '×', canvas.height); // console.log('Canvas 显示尺寸:', canvas.clientWidth, '×', canvas.clientHeight); // console.log('设备像素比:', window.devicePixelRatio); // console.log('=================='); // }, 5000); // 开始绘制到画布 setTimeout(()=>{ drawVideoToCanvas(); }, 5000); } window.onbeforeunload = function() { this.webRtcServer.disconnect() } // 绘制视频到画布 function drawVideoToCanvas() { // console.log(myVideo.readyState); if (myVideo.readyState !== 4) { requestAnimationFrame(drawVideoToCanvas); return; } // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 将Canvas像素尺寸设置为与视频原生分辨率一致 canvas.width = myVideo.videoWidth || 900; // 视频原生宽度 canvas.height = myVideo.videoHeight || 500; // 视频原生高度 canvas.style.width = "900px"; // 保持显示尺寸 canvas.style.height = "500px"; // 保持显示尺寸 // 绘制视频到画布 ctx.drawImage(myVideo, 0, 0, canvas.width, canvas.height); // 添加边框效果 ctx.strokeStyle = '#4cc9f0'; ctx.lineWidth = 3; ctx.strokeRect(0, 0, canvas.width, canvas.height); // 继续绘制下一帧 requestAnimationFrame(drawVideoToCanvas); } </script> </html>

查看全文

http://www.jsqmd.com/news/126576/