Npcink Blog
切换菜单

HTML5 Canvas 绘制线条入门示例

最后更新于
本页目录4 节

来源于：

https://www.jb51.net/html5/439875.html

理论部分:

在 html5 中，canvas 标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas 标签就相当于一块空白的画布，还需要我们自己使用 JavaScript 提供的 canvas API 编写相应的代码从而在这块画布上绘制出我们想要的图形。

备注：canvas 标签体内的文字内容将会在不支持 html5 的浏览器中显示。如上述 html 代码所示，如果你的浏览器不支持 html5 的 canvas 标签，那么将会在 canvas 标签处显示文字「您的浏览器不支持 canvas 标签」。

作为「画家」的我们，首先需要熟悉我们手中的画笔，也就是 JavaScript 中的 Canvas 对象及其相关内容。

在 html5 中，一个 canvas 标签就对应一个 Canvas 对象，我们在 JavaScript 可以使用 document.getElementById()等常规函数来获取该对象。值得注意的是，在 JavaScript 中，我们并不是直接操作 Canvas 对象，而是通过 Canvas 对象来获取对应的图形绘制上下文对象 CanvasRenderingContext2D，然后我们再利用 CanvasRenderingContext2D 对象自带的许多绘制图形的函数来绘图。

这就好像是每一张画布都对应一支画笔，要想在画布上绘画，我们就先要拿到对应的画笔，然后使用这支画笔在画布上绘图。CanvasRenderingContext2D 对象就相当于这支画笔.

我们可以使用 Canvas 对象的 getContext()方法来获取 CanvasRenderingContext2D 对象。比较细心的读者应该注意到了：getContext()方法需要传入一个字符串——2d，获取到的 CanvasRenderingContext2D 对象的名称中也带有 2D。这是因为，目前 html5 只支持 2D 绘图，但是在未来的 html5 中也可能支持 3D 或其他形式的绘图。届时，我们可能就需要使用 getContext("3d")来获取 CanvasRenderingContext3D 对象并绘制 3D 图形了。

使用 html5 canvas 绘制线条(直线、折线等)

使用 html5 Canvas 绘制直线所需的 CanvasRenderingContext2D 对象的主要属性和方法(有"()"者为方法)如下：
  1. strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示 css 颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个 CanvasGradient 对象或者 CanvasPattern 对象 globalAlpha 定义绘制内容的透明度，取值在 0.0(完全透明)和 1.0(完全不透明)之间，默认值为 1.0。
  2. lineWidth 定义绘制线条的宽度。默认值是 1.0，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边各有线条宽的一半。lineCap 指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。
  3. beginPath()开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
  4. moveTo(int x, int y)移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点
  5. lineTo(int x, int y)使用直线连接当前端点和指定的坐标点(x,y)
  6. stroke(int x, int y)沿着绘制路径的坐标点顺序绘制直线
  7. closePath()如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了 stroke())或者只有一个点，它会什么都不做。
HTML5 Canvas绘制线条入门示例

在 Canvas 的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了 CanvasRenderingContext2D 对象的上述 API 后，那么绘制线条就显得非常简单了。

画一条蓝色的直线

<!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){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");


    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。


    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(10, 10);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(50, 50);
  //定义直线的颜色
  ctx.strokeStyle = "blue";
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();
}
</script>
</body>
</html>

画一条蓝色的折线：

HTML5 Canvas绘制线条入门示例
//开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(10, 10);
  //定义中间点坐标1
  ctx.lineTo(100,35);
  //定义中间点坐标2
  ctx.lineTo(50,100);
    //定义直线的终点坐标为(50,50)
    ctx.lineTo(50, 50);
  //定义直线的颜色
  ctx.strokeStyle = "blue";
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();

补充

掌握上述内容后，相信大家对使用 Canvas 绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可，请参考上面的相关 API，这里就不再赘述了。

强烈注意：在绘制图形路径时，一定要先调用 beginPath()。beginPath()方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。

此外，对于 closePath()方法，初学者一定要稍加注意，尤其是上面 API 表格中 closePath()方法描述中的红色文字。在上面绘制折线的代码示例中，我们先调用了 stroke()，再调用了 closePath()。其实在调用 stroke()方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用 closePath()方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的 closePath()是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下 stroke()和 closePath()的调用顺序，则情况完全不一样了。由于 closePath()先调用，此时绘制路径并没有关闭，那么 closePath()将会用直线连接当前端点和起始端点。

交换 stroke()和 closePath()调用顺序后的示例代码如下：

交换调用顺序后，对应的显示效果如下：

HTML5 Canvas绘制线条入门示例