canvas lineWidth为1时线条粗细和颜色

来源：互联网发布：40岁女人护肤品知乎编辑：程序博客网时间：2024/06/10 20:37

今天在使用html5的canvas时碰到了一个问题: 当设置lineWidth为1, strokeStyle为'#000'时，画出来的线段和lineWidth为2画出来的线段差不多粗。如下

代码如下:

<!DOCTYPE html><html>  <head>    <title>Canvas</title>    <style>    canvas {    border: 1px solid pink;    }    </style>  </head>  <body>  <canvas width="500" height="300" id="mycanvas"></canvas>  </body>  <script type="text/javascript">  var mycanvas = document.getElementById('mycanvas');  var ctx = mycanvas.getContext('2d');  ctx.lineWidth = 1;  ctx.strokeStyle = '#000';  drawLine(ctx, 10, 10, 100, 10);  ctx.lineWidth = 2;  drawLine(ctx, 10, 20, 100, 20);  function drawLine(ctx, startX, startY, endX, endY) {  ctx.beginPath();  ctx.moveTo(startX, startY);  ctx.lineTo(endX, endY);  ctx.stroke();  ctx.closePath();  }  </script></html>

要解决这个问题，我们可以这样做:

<!DOCTYPE html><html>  <head>    <title>Canvas</title>    <style>    canvas {    border: 1px solid pink;    }    </style>  </head>  <body>  <canvas width="500" height="300" id="mycanvas"></canvas>  </body>  <script type="text/javascript">  var mycanvas = document.getElementById('mycanvas');  var ctx = mycanvas.getContext('2d');  ctx.lineWidth = 1;  ctx.strokeStyle = '#000';  <span style="color:#ff0000;">ctx.translate(0.5, 0.5);</span>  drawLine(ctx, 10, 10, 100, 10);  ctx.lineWidth = 2;  <span style="color:#ff0000;">ctx.translate(-0.5, -0.5);</span>  drawLine(ctx, 10, 20, 100, 20);  function drawLine(ctx, startX, startY, endX, endY) {  ctx.beginPath();  ctx.moveTo(startX, startY);  ctx.lineTo(endX, endY);  ctx.stroke();  ctx.closePath();  }  </script></html>

当lineWidth为奇数时在选区的坐标上加上0.5个像素。画出来的线段如下:

0 0