如何正确设置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();