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

最新推荐文章于 2023-10-19 13:28:39 发布

寒岁青松

最新推荐文章于 2023-10-19 13:28:39 发布

阅读量1.1w

点赞数 2

分类专栏： Html5

本文链接：https://blog.csdn.net/hansuiqingsong/article/details/40053591

版权

Html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天在使用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个像素。画出来的线段如下: