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

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

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

或：

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

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

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

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

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

解決方法如下：
例：

將畫布尺寸設(shè)置為畫板尺寸的window.devicePixelRatio倍：

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

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

繪制圖形有兩種方式：
1、 每一個(gè)繪制都相應(yīng)的放大

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();