HTML5，canvas中的线型属性lineCap设置之后没有效果！

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导致的原因可能与路径有关！</span>

先看下面代码：（关键代码如下）

content.lineWidth=40; //设置线宽为40content.strokeStyle="red"; //设置划线颜色为红色content.beginPath(); //开始创建路径content.lineCap="round"; //设置lineCap属性即端点为半圆形content.moveTo(150,50); //设置直线起点content.lineTo(150,250); //设置直线到达的位置即终点content.closePath(); //结束路径content.stroke(); //实现划线

结果如下（并没实现端点为半圆形）

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAEICAYAAACK+AAUAAAFIElEQVR4Ae3cMU4EURADUQbt/a88SCSdV7AqWUU0iYXbj5/yvO/7/vQzt8Dv3EUd9L9AsKN/CMEGO7rA6Fm92GBHFxg9qxcb7OgCo2f1YoMdXWD0rF5ssKMLjJ7Viw12dIHRs3qxwY4uMHpWLzbY0QVGz+rFBju6wOhZvdhgRxcYPasXG+zoAqNn9WKDHV1g9KxebLCjC4ye1YsNdnSB0bN6scGOLjB6Vi92FPajv+t53BWl/xCgF+v+s8HtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7cLFk/nDgbr9sHtgsXTuYPBun1wu2DxdO5gsG4f3C5YPJ07GKzbB7f74OS3gu/7rd809Xt6sVOcd0ywt8XUV7BTnHdMsLfF1FewU5x3TLC3xdRXsFOcd0ywt8XUV7BTnHdMsLfF1FewU5x3TLC3xdRXsFOcd0ywt8XUV7BTnHdMsLfF1FewU5x3TLC3xdRXsFOcd0ywt8XUV7BTnHdMsLfF1FewU5x3TLC3xdRXsFOcd0ywt8XUV7BTnHdMsLfF1FewU5x3zB9/IgoOUH7Z8wAAAABJRU5ErkJggg==" alt="" />

原因：在于还没真正实现划线时，路径已经关闭，所以将关闭路径去除或者放在实现划线后面即可实现lineCap属性的选择。

<pre name="code" class="javascript"><pre name="code" class="html">content.lineWidth=40; //设置线宽为40content.strokeStyle="red"; //设置划线颜色为红色content.beginPath(); //开始创建路径content.lineCap="round"; //设置lineCap属性即端点为半圆形content.moveTo(150,50); //设置直线起点content.lineTo(150,250); //设置直线到达的位置即终点content.stroke(); //实现划线content.closePath(); //结束路径

结果如下：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAD+CAYAAACtB4IzAAAFfklEQVR4Ae3YP04bQRiG8c9R3BlaDgANHRJpOQAddeTa58gR0tDkIhyA1pHoaMwBaIGOYqIvyJLlIsn6mZldKc9IiD/yO/vtz+/aeGellBKugwU+HZw0+FtAQFgEAQWEAjBuAwWEAjBuAwWEAjBuAyHgZ5g/PJ4fgO7uIu7vIx4eIjabiOfniNfXjz2PjiJOTiLOziIuLiKuriKuryNms8OP2SKZH+W6rvW6lNWqlMUiCYd9ZSazucdEVnSbY7MpZbkcBvYn4Nwr9xx59QG8vS1lPq+Ht4XNPXPvEVd7wLzktifc6nseY6TVFvDmpj3e9knJY42w2gH2xBsRsQ1gj8t2i7b/vfPlXB8wX9T3T6r37x3fWGb5slHt/8unp4jz84j392pbHrTRfB7x+BhxenpQfEio7ke5b9/Gx8uzzycwZ+mw6jXw58+IL186jDzgEOt1xOXlgMDwh9Zr4I8fw4/eOtFhpjoNzJfR4+OIt7fWJMP2XywiXl6a3oCo08C8qzI1vKTOmXK2hqsOYN6SmupqPFsdwLyfN9XVeLY6gHkzdKqr8Wx1APNO8lRX49nqvAtP7Tb7/pNZ8cPW/tZ1Gri/63/0u4DwyRZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZQQCgA4zZwEoBHR3CMhvHGs9Vp4MlJQwG4dePZ6gCencGzbBhvPFsdwIuLhgJw68az1QG8uoJn2TDeeLZZKaXg8XOL4+OItze8VdUNFouIl5eI2azqtrub1WlgDvj16+6+0/g5Z2qIlydZBzB3Wq2mgbY7RYeZ6gFeXkYsl7vjj/tzzpIzNV51XgO3Qz49RZyfR7y/b/8yzvf5POLxMeL0tPnx6zUwR82Bv39vPvRfD5AzdMD7PUe+C1dfq1W+L4/zlcfuuKLZsW5u+gPmMTuvdoB5Ij0RR8DLU2wLmEfocTl3vmx3S94eMI92e1vKfF7/ks49c+8RVx/APMHNppTlsh5i7pV7jrz6AW5PdL3+uKwXi+GYmcnLNfeYyKr7j/Rf/0HbeUDy3d1F3N9HPDxEbDYRz88Rr68fD8o7yXkzNO/n5S2pvKtyfd38s+3OhP/043iA/zTe9B9U95PI9M+3+oQCQlIBIeAv8j1KbGbjL3cAAAAASUVORK5CYII=" alt="" />