html5使用canvas画三角形

在网页的某个角落，有一个拥有黄色背景的canvas画布，它的尺寸是500x500像素。在这块画布上，我们将通过JavaScript绘制两个三角形，一个空心，一个实心。让我们一步步地了解如何实现这一过程。

我们通过`document.getElementById`获取到了这个canvas元素，然后使用`getContext('2d')`获取到了它的2D渲染上下文。这个上下文对象允许我们在canvas上进行各种绘图操作。

接下来，我们创建了一个路径并开始绘制它，通过`moveTo`方法移动到了画布上的某个点（在这里是(250,50)），然后通过连续的`lineTo`方法连接其他点，形成了一个路径。这个路径实际上是一个开放的形状，因为我们还没有调用`closePath`方法来闭合它。为了绘制一个空心三角形，我们首先使用`strokeStyle`设置颜色为红色，然后通过`stroke`方法描边。一个红色的空心三角形就出现在画布上。

紧接着，我们开始绘制一个实心的三角形。我们再次创建一个新的路径，这次我们从点(350,50)开始，并连接到其他两个点，形成一个封闭的三角形。然后，我们使用`fill`方法来填充这个三角形。至此，一个红色的实心三角形出现在了画布的另一个位置。

以上就是通过简单的JavaScript和HTML代码在canvas上绘制两个三角形的过程。这种图形绘制的方式在网页开发中非常常见，无论是创建游戏、制作交互式应用还是设计网站，这种技能都是非常有用的。现在让我们继续渲染页面的其他部分吧，比如通过调用`cambrian.render('body')`来进一步丰富网页的内容。