<!DOCTYPE HTML>
<html>
<head>
<title>lineWidth</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
for (i=0; i<10; i++)
{
cxt.lineWidth=1+i;
cxt.strokeStyle="#F55";
cxt.beginPath();
cxt.moveTo(5+i*14,5);
cxt.lineTo(5+i*14,140);
cxt.stroke();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="150" style="border:2px solid #06f;"></canvas>
</body>
</html>
【lineWidth 该属性是定义线条粗细的。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。实例中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。并且，最左边的以及所有宽度为奇数的线并不能精确呈现，这就是因为路径的定位问题。】