html5 Canvas绘制线条 closePath()实例代码

在网页的某个角落，一段简洁而富有生命力的代码悄然存在，它使用Canvas技术绘制了两个简单的图形。让我们一起领略这段代码的魔力。

在网页上，有一个``元素，它的ID是“can”，宽度和高度都是170像素。这是一个空白的画布，等待着代码的笔触。

当页面加载完毕，JavaScript开始执行它的任务。它通过`$("can").get(0)`获取到canvas元素，然后使用`getContext("2d")`获取其2D渲染上下文。

接下来的代码，就像一位艺术家在画布上挥洒自如。它首先创建了一条路径，然后开始绘制。画笔从坐标(105,105)出发，经过(105,45)，再到(45,105)，形成了一个三角形的轮廓。`closePath()`命令将这条路径闭合，然后进行了描边，形成一个实心的三角形。

紧接着，又开始了新的路径绘制。画笔从(25,25)出发，经过(100,25)，再到(25,100)，形成另一条路径。这次没有进行闭合操作，所以这条路径是空心的。

这样，画布上就有了两个图形：一个是闭合的实心三角形，另一个是未闭合的空心形状。这两个图形展示了Canvas中路径绘制的基本操作，包括开始路径、移动、连线、闭合和描边。

这段代码的魔力在于，它展示了如何通过简单的指令，在Canvas上绘制出复杂的图形。通过JavaScript的控制，我们可以在这张白纸上自由挥洒，创造出无限可能。

这段代码不仅展示了Canvas和JavaScript的结合魅力，也让我们领略了编程艺术的独特之处。在这个数字化的世界里，我们可以通过代码创造出无限的可能性和美丽的图形。