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