Canvas がぼやけた画像を生成する

参考文書：
https://blog.csdn.net/qq_41887214/article/details/123173072
https://juejin.cn/post/6844903828916011022
https://www.jb51.net/html5/815034.html

この問題を解決する前に、次の背景知識を理解しておく必要があります。
1. 画面に関する基本的な知識:

物理ピクセル (DP)

物理ピクセルはデバイスピクセルとも呼ばれ、携帯電話の解像度を物理ピクセルとよく聞きますが、たとえばiPhone 7の物理解像度は750 * 1334です。画面はピクセルで構成されており、水平方向に 750 ピクセル、垂直方向に 1334 ピクセルがあります。

デバイス独立ピクセル (DIP)

論理ピクセルとも呼ばれます。たとえば、Iphone4 と Iphone3GS のサイズは 3.5 インチで、実際の幅 320 ピクセルの画像を描画すると、iPhone4 の物理解像度は 640 * 980 ですが、3GS は 320 * 480 しかありません。 iPhone4 のレイアウト画面の半分のみにコンテンツがあり、残りの半分は空白ですこの問題を回避するために、論理ピクセルを導入し、描画しやすいように両方の携帯電話の論理ピクセルを 320 ピクセルに設定しました

デバイスのピクセル比 (DPR)

結局のところ、上記のデバイスの独立したピクセルは計算の便宜上のものであり、デバイスの論理ピクセルを統一しましたが、各論理ピクセルが表す物理ピクセルは決定されていません。ピクセルとスケーリングされていない状態の論理ピクセルに、デバイスピクセル比 (DPR) の概念を導入します。
デバイスピクセル比 = デバイスピクセル / 論理ピクセル
画像の説明を追加してください

上の図からわかるように、同じ論理ピクセルサイズでは、高解像度画面の方が物理ピクセル数が多くなります。通常の画面では、1 論理ピクセルは 1 物理ピクセルに対応しますが、dpr = 2 の高解像度画面では、1 論理ピクセルは 4 物理ピクセルで構成されます。高解像度の画面がより繊細になるのはこのためです。

2. キャンバスに関する基礎知識

Canvas はビットマップを描画します
キャンバスの幅と高さのプロパティ

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" // 蓝色
也就项上述的图片展示一致  红色为普通屏  蓝色为高清屏；

絵がぼやける原因：
キャンバスで描画されるグラフィックスはビットマップ、つまりラスターイメージまたはビットマップイメージですが、高解像度の画面にレンダリングすると拡大され、各ピクセルは正方形の物理ピクセルでレンダリングされます。 devicePixelRatio の値が大きいため、画像がぼやけてしまいます。

解決策:
devicePixelRatio 倍のキャンバスの幅と高さを拡大し、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 がぼやけた画像を生成する

おすすめ