移动端适配，再也不担心 Canvas 绘图放不下了！

2023-12-11 02:22:48

移动端 Canvas 绘图：实现完美适配的终极指南

随着移动互联网的蓬勃发展，移动端开发已成为 web 开发的重中之重。而 Canvas 绘图作为移动端开发中的常用技术，正因其强大灵活的绘制能力受到广泛青睐。然而，如何在移动端实现 Canvas 绘图的完美适配，却是一道亟待解决的难题。

Canvas 绘图的原理

Canvas 绘图是一种基于像素的绘图技术，通过将一个个像素点组合在一起形成图形、图像和动画。然而，在 PC 端与移动端之间，由于设备像素密度（Device Pixel Ratio，简称 DPR）的差异，直接将 PC 端的 Canvas 绘制方法移植到移动端可能会出现清晰度下降的问题。

移动端 Canvas 绘图适配的解决方案

为了解决移动端 Canvas 绘图的适配问题，我们需要对画布进行缩放。缩放比例可以通过以下公式计算：

scale = window.devicePixelRatio / 1;

其中：

scale 为缩放比例
window.devicePixelRatio 为设备像素密度

将缩放后的画布添加到页面中，即可实现 Canvas 绘图的移动端适配。然而，这种方法会导致画布清晰度降低。

优化 Canvas 绘图清晰度

为了优化 Canvas 绘图的清晰度，我们可以使用 CSS 的 transform-origin 属性指定缩放原点。

canvasElm.style.transformOrigin = 'left top';
canvasElm.style.transform = 'scale(' + scale + ')';

这样，我们就完美解决了 Canvas 绘图的移动端适配问题，既保证了清晰度，又确保了绘图效果的一致性。

示例代码

// 获取设备像素密度
const DPR = window.devicePixelRatio;

// 创建 Canvas 元素
const canvas = document.createElement('canvas');

// 设置 Canvas 属性
canvas.width = 500 * DPR;
canvas.height = 300 * DPR;

// 设置 CSS 样式
canvas.style.transformOrigin = 'left top';
canvas.style.transform = `scale(${DPR})`;

// 将 Canvas 添加到页面中
document.body.appendChild(canvas);

// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');

// 绘制图形
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100 * DPR, 100 * DPR);