比如我们有如下代码（1）:
<canvas width="600" height="300" style="width: 300px; height: 150px"></canvas> style中的width和height分别代表canvas这个元素在界面上所占据的宽高， 即样式上的宽高
attribute中的width和height 则代表canvas实际像素的宽高
如果还无法理解的话，可以想象成以下的代码（2）：
<!-- logo.png的像素为600 * 300 -->
<img style="width: 300px; height: 150px" src="logo.png" /> canvas默认的width和height是300 * 150，对其设置了css之后， canvas会根据设置css宽高进行缩放（注意不是裁剪） ，这一点和img标签一样
上述代码（1）其实还可以再换一种更通俗的解释方式，就是1个逻辑像素实际上由2个canvas像素填充。
模糊原因的初步探讨
上面是对所需基础知识的一些简介，下面开始正式进行探究。
首先我们提到使用canvas绘制图像的是位图，而我们平常用的jpg，png也是位图。那么什么是位图？
位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。具象一点讲，可以将位图想象成一个巨大的拼图，这个拼图有无数的拼块，每个拼块代表了一个纯色的像素点。 理论上，1个位图像素对应着1个物理像素 。但假如说你使用了高清屏，比如苹果的retina屏去查看一幅图画，又会是什么样子呢？
假设我们有如下代码，该代码将展示在iphone4的retina屏上：
<canvas width="320" height="150" style="width: 320px; height: 150px"></canvas>iphone4本身的物理像素为640 * 980，而设备独立像素为320 * 480，这代表着1个css像素实际由4个物理像素构成，canvas的像素为320 * 150，其css像素为320 * 150，则代表1个css像素将会由1个canvas元素构成，这样进行换算， 在retina屏幕下，1个canvas像素（或者说是1个位图像素）将会填充4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊 。
如果还有疑惑的话，以下的图片可以说明位图在retina屏幕下是如何填充的：
上图中左侧的是在普通屏幕下的显示规则，可以看出有4个位图像素点，而右侧的高清屏幕下则有16个像素点。由于像素点不可切割的原因，颜色产生了改变。
但是还有一点没有解释清楚，就是为什么图片会就近取色而不是直接取原值，这也是导致模糊的幕后黑手。
