HTML5画布绘制的线条看起来模糊-猿码集

HTML5画布绘制的线条看起来模糊

HTML5的场景能力,是一项重量级的技术内容，涉及到大量的理论知识和实际应用案例。其中，Canvas 即为其中之一，它是 HTML5 新增的唯一的重量级组件。使用它可以轻松绘制出基本形状，箭头、线段、图表、动态效果、视频内容截图等高端需求场景。

1.Canvas介绍

把 Canvas 画布简单的理解成是一张画布，只不过这张画布是一块完全拓展开的空间。我们可以在这个空间上自由进行绘图工作，比如画线、画圆等。在 HTML 中，常用的绘图方式就有以下两种：

使用img 标签；

使用canvas 标签。

Canvas 标签，是一个 HTML5 元素。它可以用 JavaScript 来绘制图像，例如：图表和其他类型的图像。我们可以通过简单的JavaScript 代码来进行操作。简单来理解，就是我们利用JS将一个白夹板超大化，然后可以用画笔在上面随心所欲地作画。

2.画布的清晰度问题

在使用Canvas 组件绘制图形时，我们常常遇到的问题就是无论如何设置都无法避免出现模糊、失真、毛边等问题。这一点在与实际应用中是非常苛刻的，因为我们需要的是精准度，所以这些小问题必须要解决，才能满足市场需求。

其实模糊的原因很简单，就是因为在绘制时没有将像素点对齐。以普通显示器为例，它的分辨率是72PPI（Pixels per Inch），每英寸有72个像素的点阵排列。因此，在绘制时每个单位距离都必须是72分之一英寸，例如，在横向上，10个像素点的距离一定是10/72英寸。

为了较为直观的展示 canvas 画布的清晰度问题，我将代码简单实现如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas 可画区域，大小与背景区域一致</title>
</head>
<body>
<canvas id="myCanvas" width="300px" height="200px" style="border:1px solid #000000;"></canvas>
</body>
<script>
// 获取画布
var canvas = document.getElementById("myCanvas");
// 获取画布上下文
var context = canvas.getContext("2d");
// 设置样式
context.moveTo(0,0);
context.lineTo(100,100);
context.moveTo(0,100);
context.lineTo(100,0);
// 设置线条样式
context.lineWidth = 2;
context.strokeStyle = '#000000';
// 把样式带入绘制
context.stroke();
</script>
</html>

打开效果如下：

可以看到，在绘制出两条线段的时候，并没有使用像素点对齐的方法，所以看起来比较模糊。

3.画布清晰度的解决方案

针对模糊问题，我们需要重新设置canvas 组件的宽高，让其与屏幕物理分辨率保持一致，这里需要注意，如果还是以72PPI进行计算对齐是不够的，因为不同屏幕的物理分辨率不同，这里可以应用window.devicePixelRatio获取物理分辨率的比值。获取到比值后再用 JavaScript 设置 canvas 的 width 和 height 值，然后再将 canvas 在页面中的尺寸缩小为原来的1/devicePixelRatio 倍即可。

接下来看一下使用像素点对齐的实现效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas 点对齐</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 当前设备像素比
var devicePixelRatio = window.devicePixelRatio;
// 得到物理像素
let backingStoreRatio = context.backingStorePixelRatio ||
  context.webkitBackingStorePixelRatio ||
  context.mozBackingStorePixelRatio ||
  context.msBackingStorePixelRatio ||
  context.oBackingStorePixelRatio || 1;
// 物理像素与设备像素比
let ratio = devicePixelRatio / backingStoreRatio;
// 以物理像素为宽高设置Canvas 大小（可画区域）
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
// 使用 CSS 将 Canvas 还原到原来的大小，并保证像素对齐
context.scale(ratio, ratio);
context.moveTo(0,0);
context.lineTo(100,100);
context.moveTo(0,100);
context.lineTo(100,0);
context.lineWidth = 2;
context.strokeStyle = '#000000';
context.stroke();
</script>
</html>

打开效果如下：

由此我们发现，通过像素对齐的方法之后```Canvas``` 清晰度得到很大的提高。

4.总结

以上就是关于HTML5的Canvas绘制的线条模糊的问题原因及解决方式的整理。由此我们可以发现，```Canvas``` 性能非常的高，结合一些专业开发，可以使用它来完成很多我们想象不到的场景，比如图表的绘制、地图的绘制、拖拽效果的绘制等等。但是，使用它还是需要对独立像素的概念有一个深入了解，对像素对齐的处理进行充分考虑，才能保障页面展示效果。同时，针对特定需求场景，我们也可以使用一些成熟的框架，如Echarts等，来帮助我们更好的完成开发。

HTML5画布绘制的线条看起来模糊