摘要：一如何正確設置尺寸有兩種一種是屬性，一般稱其為畫布尺寸，即圖形繪制的地方。一般稱其為畫板尺寸，用于渲染繪制完成的圖形。二如何在高分辨率屏幕上清晰顯示圖形上面說過，避免圖形變形失真，要保持畫布尺寸和畫板尺寸一致。

Canvas有兩種width、height：
1、一種是width、height屬性，一般稱其為畫布尺寸，即圖形繪制的地方。默認值分別為300px、150px。
例：

2、另一種是css樣式里的width、height屬性，可通過內(nèi)聯(lián)樣式、內(nèi)部樣式表或外部樣式表設置。一般稱其為畫板尺寸，用于渲染繪制完成的圖形。默認值為空。
例：

或：

如果設置了畫布尺寸，未設置畫板尺寸，或者兩者都未設置，那么畫板尺寸隨畫布尺寸改變。
但若設置了畫板尺寸，而未設置畫布尺寸，或者分別設置了，那么畫板尺寸將不再隨畫布尺寸而改變。如果兩者設置的尺寸不一樣時，就會產(chǎn)生一個問題，渲染時畫布要通過縮放來使其與畫板尺寸一樣，那么畫布上已經(jīng)繪制好的圖形也會隨之縮放，隨之導致變形失真。
例：

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

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

顯然，畫布上的圖形在渲染時變形了。
為了避免發(fā)生這種情況，保持畫布尺寸和畫板尺寸一致。

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

解決方法如下：
例：

將畫布尺寸設置為畫板尺寸的window.devicePixelRatio倍：

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

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

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

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

2、用scale（）縮放后再繪制

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