| 指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。 |
| beginPath() |
开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。 |
| moveTo(int x, int y) |
移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点 |
| lineTo(int x, int y) |
使用直线连接当前端点和指定的坐标点(x,y) |
| stroke(int x, int y) |
沿着绘制路径的坐标点顺序绘制直线 |
| closePath() |
如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。 |
在Canvas的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了CanvasRenderingContext2D对象的上述API后，那么绘制线条就显得非常简单了。
使用canvas绘制基本的直线
现在，我们就使用canvas来绘制最基本的直线。
- <!DOCTYPE html>
<html>
- <head>
<meta charset="UTF-8">
- <title>HTML5 Canvas绘制线条入门示例</title>
</head>
- <body>
- <!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
- 您的浏览器不支持canvas标签。
</canvas>
-
<script type="text/javascript">
- //获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
- //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
