canvas 绘图常常发明他是隐约的。处理这个题目主要从两个方面动手。

1. 转变canvas衬着的像素
   状况：画1像素的线条看起来隐约不清，彷佛更宽的模样。

处理计划

var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);

道理：人人都晓得屏幕最小单元就是像素。假如把canvas放的足够大，我能看到下面模样。

每个方格就是长和宽都为1px。当我们画1px线条时遵照像素的起止局限，我们能获得规范的细线。

但遗憾的是canvas的画法不一样。canvas的每条线都有一条无穷细的“中线”，线条的宽度是从中线向两侧延长的。假如我们照样从第2个像素点画一条线，那末线条的中线就会靠齐到第2个像素的出发点，然后我们最先画了，题目也就来了：Canvas 的线条以中线向两侧延长，而不是向某一边延长(比方这里，假如只是往右边延长，那末我们的题目就不再是题目了)，延长事后我们的线条现实上是如许的：

然则计算机不允许涌现<1px的图形。所以会做个折衷，把两个像素都绘制了。如此一来，原本1px的线条，就成了看起来2px宽的线条。
怎样处理这个题目，就是把线条中线和和像素中心点对齐就好了。

中心点位置很好找，向后挪动0.5px。所以你们画线时能够如许：

ctx.moveTo(100.5,100.5);
ctx.lineTo(200.5,100.5);
ctx.lineTo(200.5,200.5);
ctx.lineTo(100.5,200.5);
ctx.lineTo(100.5,100.5);

或许

ctx.translate(0.5, 0.5);

2.设置显现比例
在浏览器的window变量中有一个devicePixelRatio的属性，该属性决议了浏览器会用几个（通常是2个）像素点来衬着1个像素，举例来说，假定某个屏幕的devicePixelRatio的值为2，一张100×100像素大小的图片，在此屏幕下，会用2个像素点的宽度去衬着图片的1个像素点，因而该图片在此屏幕上现实会占有200×200像素的空间，相当于图片被放大了一倍，因而图片会变得隐约。
**实在计划很简单，也很轻易邃晓。我们能够建立一个两倍于现实大小的canvas，然后用css款式把canvas限定在现实的大小。
下面是完成细致代码例子：

var canvas = document.getElementById("canvas")
        context= canvas.getContext("2d");  
    var devicePixelRatio = window.devicePixelRatio || 1;
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1;
    var ratio = devicePixelRatio / backingStoreRatio;
    canvas.width = canvas.width * ratio;
    canvas.width = canvas.height* ratio;
    context.scale(ratio, ratio);
    ctx.translate(0.5, 0.5);
    ctx.lineWidth = 1;
    ctx.moveTo(2.5, 2);
    ctx.lineTo(98.5, 2);
    ctx.lineTo(98.5, 98);
    ctx.lineTo(2.5, 98);
    ctx.lineTo(2.5, 2);
    ctx.stroke();

本来细致细致诠释：请看这里