.canvas.style.width跟canvas.width（同理，canvas.style.height和canvas.style.height）是两个不同的概念。canvas.style.width是浏览器渲染canvas的尺寸，而canvas.width是canvas的画布大小。所以不要误以为在css里面设置了canvas的尺寸就OK啦。如果没有设置canvas的width和height属性，则其默认值是width:300px,height:150px。

<canvas id="canvas0" style="width:100%;height:100%;"></canvas>

var canvas=document.getElementById("canvas0");
var HEIGHT=canvas.height;
var WIDTH=canvas.width;
var hdistance=HEIGHT/8;
var wdistance=WIDTH/12;

window.onload=function()
{
   var i;
   /*水平*/
   for(i=1;i<8;i++)
   {
       cxt.save();
       cxt.translate(0.4,0.4);
       cxt.lineWidth=0.4;
       cxt.beginPath();
       cxt.moveTo(0,hdistance*i);
       cxt.lineTo(WIDTH,hdistance*i);
       cxt.closePath();
       if(i==4)
           cxt.strokeStyle="#5F9EA0";
       else
           cxt.strokeStyle="#ADD8E6";
       cxt.stroke();
       cxt.restore();
   }

}

这是改过的  效果还相对舒服点，不过还是没有办法画出比较细的线 求大神指点

这是canvas里的一个怎么说呢，在绘制奇数宽度的时候它会绘制出 以这个奇数值+1的宽度 但是却是模糊的，并不是只有 lineWidth =1 才有这个问题。

代码呢？