第一、介绍Canvas

canvas能做什么?

canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。

canvas标签

<canvas width="400" height="300">

</canvas>

当然你也可以通过css来设定！如果你不设定宽高，默认宽高是300*150。

对于低版本的浏览器，你把需要反馈的信息放到canvas标签之间。

<canvas width="400" height="300">

    <p>你想看我，就升级浏览器吧！</p>

</canvas>

获取上下文，你所有的绘画操作都是在上下文，目前只支持2d。

window.onad=function(){
    var canvas = document.getElementById("myCanvas");
    var context= can.getContext("2d");
}

 

针对Retina显示屏

让canvas清晰的显示在Retina上，以及标准清晰度显示器很简单，只要通过屏幕的像素密度确定的比例乘以canvas就行。首先，你需要了解的像素值如何存储在一个canvas上。

 

后备存储就是在canvas上存储数据的每个像素的颜色值。我们的目标是为每个显示在画布上的像素在后背存储中提供一个像素。在像素被推到屏幕上之前，它们的值在这里计算。然而，在后备存储器为代表的像素的数量可能不等于象素的数目推到屏幕上。对Retina设备，canvas的宽度和高度被加倍，以维持一致的大小和相对于其他HTML元素的位置，并且作为一个结果，它延伸并模糊了其内容。为了抵消这种伸展，你需要加倍的后备存储时，适当的宽度和高度。

 

如果你正在处理的光栅图像或视频数据，找出如何进一步优化画布， Retina显示屏的“像素处理。 ”因为在任何情况下一个更大的画布未必有利，你需要选择优化你的Canvas为了Retina设备。首先，确定显示器呈现你的画布是否确是Retina口径。如果是，按照该设备的像素比例缩放后备存储。

一方面视网膜器件有一个2的像素比例，因为有一个2:1的比例的显示像素，以在x和y方向上的后备存储像素。在另一方面，标准清晰度的显示器，映射1的后备存储像素到1显示像素，所以它们的设备的像素比例将始终是1。

 

在JavaScript中，你可以决定后备比例的因素。首先，看浏览器是否已经定义了window.devicePixelRatio。如果该设备的像素比例大于1时，用户是一个Retina显示器上。确定合适的后备比例的代码如下：

window.onload=function(){
       var canvas = document.getElementById("myCanvas");
      var context= canvastContext("2d");
       var scaleFactor = backingScale(ctx);
       if (scaleFactor > 1) {
              canvas.width = canvas.width * scaleFactor;
              canvas.height = canvas.height * scaleFactor;
              // update the context for the new canvas scale
              var context = canvas.getContext("2d");
       }
}
 function backingScale(context) {
              if ('devicePixelRatio' in window) {
                     if (window.devicePixelRatio > 1) {
                            return window.devicePixelRatio;
                     }
              }
              return 1;

}