首页 > 其他分享> 文章详细

H5 canvas 解决合成图模糊（canvas真机下scale不起作用，无法缩放显示的问题）

2022-02-09 16:34:50 阅读：281 来源： 互联网

标签：canvas scale ratio 合成图缩放 ctx var size

在解决canvas合成图片模糊的问题想必我们已经了解了

window.devicePixelRatio
window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
使用 ctx.scale(scale, scale)来解决合成后图片模糊的问题，但是移动端真机测试时候却发现scale却不生效，并且微信开发社区也已经明确指出原生组件的使用限制部分 CSS 样式无法应用于原生组件，例如：

- 无法对原生组件设置 CSS 动画
- 无法定义原生组件为 position: fixed
- 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域

如下面回复：

其实解决问题很简单，既然scalse 不生效，手动放大倍数不就行了吗！

解决思路：

1.拿到devicePixelRatio

var ratio = window.devicePixelRatio;

2.把画布放大

canvas.width = Math.floor(size * ratio); canvas.height = Math.floor(size * ratio);

只放大画布的情况下合成效果如

3.合成时候同样把文字位置、大小进行放大（替换scale的效果）

ctx.fillRect(10 * ratio, 10 * ratio, 300 * ratio, 300 * ratio);

var x = size / 2;
var y = size / 2;

var textString = "I love MDN";
ctx.fillText(textString, x * scale, y * ratio)

下面是csdn一个解决方案:

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

// Set display size (css pixels).
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// Set actual size in memory (scaled to account for extra pixel density).
var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// Normalize coordinate system to use css pixels.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = size / 2;
var y = size / 2;

var textString = "I love MDN";
ctx.fillText(textString, x, y)

更改后的兼容代码

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

// Set display size (css pixels).
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// Set actual size in memory (scaled to account for extra pixel density).
var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// Normalize coordinate system to use css pixels.


ctx.fillStyle = "#bada55";
ctx.fillRect(10 * scale , 10 * scale , 300 * scale , 300 * scale );
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = size / 2;
var y = size / 2;

var textString = "I love MDN";
ctx.fillText(textString, x* scale, y * scale)

标签：canvas,scale,ratio,合成图,缩放,ctx,var,size
来源： https://www.cnblogs.com/imMeya/p/15875624.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

H5 canvas 解决合成图模糊（canvas真机下scale不起作用，无法缩放显示的问题）