在线直播系统源码，canvas 生成图片模糊
关于canvas的一些基础知识
canvas绘制的是位图
canvas的width和height属性
canvas的width和height属性与style的width,height 不同。应注意区分：
<canvas width="600" height="300" style="width: 300px; height: 150px"></canvas>
style中的width和height分别代表canvas这个元素在界面上所占据的宽高，即样式上的宽高
attribute中的width和height则代表canvas实际像素的宽高
也就是就是1个逻辑像素实际上由2个canvas像素填充。
例如: 示例一： canvas width="300" height="150" style="width: 300px; height: 150px" // 红色
示例二：canvas width="600" height="300" style="width: 300px; height: 150px" // 蓝色
也就项上述的图片展示一致 红色为普通屏 蓝色为高清屏；
图片模糊原因：
canvas 绘制的图形是位图，即栅格图像或点阵图像，当将它渲染到高清屏时，会被放大，每个像素点会用 devicePixelRatio 的平方个物理像素点来渲染，因此图片会变得模糊。
解决方法：
放大 devicePixelRatio 倍 canvas 的宽高，然后再用css缩小回到你想要的理想像素
uniapp 解决问题实例：
1、 canvas 节点
<!-- 避免图片失真，获取设备像素比设置画布大小，css样式在设置内容块宽高 -->
<canvas canvas-id="mycanvas" :style="'width: '+popWidth*devicePixelRatio+'px;height: '+canvasHeight*devicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;position: fixed;opacity: 0;top: -'+canvasHeight+100+'px;'"></canvas>
2、获取设备像素比
uni.getSystemInfo({
success(res) {
that.popWidth = res.windowWidth;
// 设备像素比大于1
if (res.devicePixelRatio > 1) {
that.devicePixelRatio = res.devicePixelRatio;
}
}
});
3、绘制
let ctx = uni.createCanvasContext('mycanvas', this); // 创建canvas对象
ctx.setFillStyle('#fff');
// 避免二维码失真，导致识别二维码失败；
// 获取设置像素比。绘制设备像素比相符的画布内容，在csstranform设置节点样式缩放，transform-origin基准设置为0，0；
// 这样获取到的画布图片内容就不会失真了。
ctx.fillRect(0, 0, that.popWidth*that.devicePixelRatio, that.canvasHeight*that.devicePixelRatio); // that.canvasHeight 为你设计图的画布高度；
以上就是 在线直播系统源码，canvas 生成图片模糊，更多内容欢迎关注之后的文章
标签：canvas,devicePixelRatio,像素,width,直播,height,源码,图片 From： https://www.cnblogs.com/yunbaomengnan/p/16719094.html