如何正確設置canvas尺寸，以及如何在高分辨率屏幕上清晰顯示canvas圖形

1、如何正確設置canvas尺寸？

Canvas有兩種width、height：
一、一種是width、height屬性，通常稱其爲畫布尺寸，即圖形繪製的地方。默認值分別爲300px、150px。
例：
<canvas id="canvas" width="300" height="300">
二、另外一種是css樣式裏的width、height屬性，可經過內聯樣式、內部樣式表或外部樣式表設置。通常稱其爲畫板尺寸，用於渲染繪製完成的圖形。默認值爲空。
例：
<canvas id="canvas" style="width:300px; height:300px;">
或：

<style>
    #canvas {
       width:300px;
       height:300px;
    }
</style>

若是設置了畫布尺寸，未設置畫板尺寸，或者二者都未設置，那麼畫板尺寸隨畫布尺寸改變。
但若設置了畫板尺寸，而未設置畫布尺寸，或者分別設置了，那麼畫板尺寸將再也不隨畫布尺寸而改變。若是二者設置的尺寸不同時，就會產生一個問題，渲染時畫布要經過縮放來使其與畫板尺寸同樣，那麼畫布上已經繪製好的圖形也會隨之縮放，隨之致使變形失真。
例：
<canvas id="canvas" style="width:200px; height:200px;">

<script>
    var canvas=document.getElementById('canvas');  
    var context=canvas.getContext('2d');
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(200,200);              
    context.stroke();
</script>

最終顯示結果，在畫板（200X200）上渲染的圖形：

在畫布（300X150）上繪製的圖形：

顯然，畫布上的圖形在渲染時變形了。
爲了不發生這種狀況，保持畫布尺寸和畫板尺寸一致。

2、如何在高分辨率屏幕上清晰顯示canvas圖形？

上面說過，避免圖形變形失真，要保持畫布尺寸和畫板尺寸一致。這只是針對分辨率不高的設備而言，其devicePixelRatio爲1。而高分辨率屏幕，它的devicePixelRatio大於1。
canvas繪製的圖形是位圖，即柵格圖像或點陣圖像，當將它渲染到高清屏時，會被放大，每一個像素點會用devicePixelRatio的平方個物理像素點來渲染，所以圖片會變得模糊。

解決方法以下：
例：
<canvas id="my-canvas" style="width:200px; height:200px;"></canvas>
將畫布尺寸設置爲畫板尺寸的window.devicePixelRatio倍：

var canvas=document.getElementById('canvas');    
canvas.width=canvas. clientWidth*window.devicePixelRatio;
canvas.height=canvas.clientHeight*window.devicePixelRatio;

注意：樣式設置的width是的元素內容寬度，不包括內邊距、邊框、外邊距的，而clientWidth包括內邊距，不包括邊框、外邊距、滾動條的（若是有）。
var context=canvas.getContext('2d');

繪製圖形有兩種方式：
一、 每個繪製都相應的放大

context.beginPath();
context.moveTo(0,0);
context.lineTo(200*window.devicePixelRatio,200*window.devicePixelRatio);
context.lineWidth=context.lineWidth*window.devicePixelRatio; 
context.stroke();

二、用scale（）縮放後再繪製

context.scale(window.devicePixelRatio,window.devicePixelRatio)；
context.beginPath();
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();