解決canvas畫圖模糊的問題

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，一張100x100像素大小的圖片，在此屏幕下，會用2個像素點的寬度去渲染圖片的1個像素點，所以該圖片在此屏幕上實際會佔據200x200像素的空間，至關於圖片被放大了一倍，所以圖片會變得模糊。
**其實方案很簡單，也很容易明白。咱們能夠建立一個兩倍於實際大小的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();

原來具體詳細解釋：請看這裏

關注

歡迎關注小站小滑輪，小站都是平時工做中積累的一些小工具。是否是大家工做中也會遇到呢。關於小站的內容也能夠在博客下面留言哦。有什麼使用的工具想讓我補充，也能夠留言。