5回答

• 

  李晓健

  2015-12-08 16:11:08

  已采纳

  我也不知道为什么。<canvas id="canvas0" width="400" height="400"></canvas>   这里的宽和高像你那个写在style中就会出现你的那种问题。如果直接写到width和height属性上就没有问题。你可以js中获取窗口的大小，然后设置canvas 的 width和 height
  

  1 0

  湖工咖啡

  果然大神，问题已解决！

  2015-12-08 17:57:49

  共 1 条回复 >

• 

  霞_霞

  2015-12-14 15:06:18

  .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。

  
  

  0 0
• 

  湖工咖啡

  2015-12-08 14:24:28

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

  }

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

  0 0
• 

  木子舟义

  2015-12-08 14:23:31

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

  2 0

  木子舟义 回复湖工咖啡

  你可以先用translate 再用缩放 scale(sx,sy);

  2015-12-08 14:33:30

  共 2 条回复 >

• 

  李晓健

  2015-12-08 14:15:37

  代码呢？

  1 0

  湖工咖啡

  详见下面的的评论，这里放不下我的代码~

  2015-12-08 14:28:07

  共 1 条回复 >