html5的画布canvas——画出简单的矩形、三角形实例

在HTML页面的核心位置，嵌入了一个canvas元素。这个元素如同画布，拥有独特的ID，宽度和高度属性，为后续的绘图操作提供了基础。canvas元素的代码片段如下：

```html

```

接着，我们通过JavaScript获取这个canvas对象，并获取其上下文。这里的“2d”参数是必要的，它代表我们在二维空间进行绘图操作。代码如下：

```javascript

var cxt = document.getElementById('demo').getContext("2d");

```

在canvas上开始绘图的流程，主要有两种方式：描边（fill）和填充（stroke）。下面是一段生动的JavaScript代码示例，展示了如何在canvas上绘制图形：

```javascript

```

在上述脚本执行后，canvas将展示一个带有红色填充矩形、黑色边框矩形以及复杂线条图形的画面。通过这段代码，我们已经在canvas上成功地绘制出了丰富的图形元素。最终的展示效果将通过`cambrian.render('body')`命令渲染到网页的body部分，呈现出丰富多彩的视觉效果。