本文概述了HTML5 canvas的基本用法。概述分为两部分：

• 声明一个HTML5 canvas元素。
• 在canvas元素上绘制图形。

声明画布元素

首先，让我们看看如何在HTML页面中声明canvas元素：

<canvas id="ex1" width="500" height="150"
           style="border: 1px solid #cccccc;">
    HTML5 Canvas 不支持
</canvas>

上面的代码声明了一个单独的画布元素，其中width设置为500，height设置为150，style设置为1像素边框，颜色为#cccccc。

如果浏览器支持HTML5 canvas元素，则canvas元素内的文本将被忽略。如果HTML5 canvas元素为，则文本可能会被浏览器显示为普通文本。

我们应该将画布HTML代码放在页面中我们希望画布可见的位置。就像任何其他HTML元素(例如div元素)一样。

在画布元素上绘制图形

在HTML5画布上绘制的图形以即时模式绘制。即时模式意味着，一旦我们在画布上绘制了一个形状，画布就不再对该形状有任何了解。该形状是可见的，但是我们不能单独操作该形状。它就像一幅真正的绘画画布。绘制后，剩下的就是彩色颜料/像素。

这与SVG相反，在SVG中，我们可以单独操作形状并重新绘制整个图。在HTML5中，如果要更改绘制的图形，则必须自己重新绘制所有内容。

按照以下步骤，使用JavaScript在HTML5 canvas元素上绘制图形：

• 等待页面完全加载。
• 获取对canvas元素的引用。
• 从canvas元素获取2D上下文。
• 使用2D上下文的绘制功能绘制图形。

这是一个简单的代码示例，显示了上述步骤：

<script>

    // 1. wait for the page to be fully loaded.
    window.onload = function() {
        drawExamples();
    }

    function drawExamples(){
    
        // 2. Obtain a reference to the canvas element.
        var canvas  = document.getElementById("ex1");

        // 3. Obtain a 2D context from the canvas element.
        var context = canvas.getContext("2d");

        // 4. Draw graphics.
        context.fillStyle = "#ff0000";
        context.fillRect(10,10, 100,100);
    }
</script>

首先，将事件侦听器功能添加到窗口。加载页面后，将执行此事件侦听器功能。这个函数调用了我定义的另一个函数，叫做drawExamples()。

其次，drawExamples()函数使用document.getElementById()函数获取对canvas元素的引用，并传递canvas元素声明中定义的canvas元素的id。

第三，drawExamples()函数通过在较早获得的canvas元素上调用canvas.getContext(" 2d")从canvas元素获取对2D上下文的引用。

第四，drawExamples()函数在2D上下文对象上调用各种绘图函数，从而导致在画布上绘制图形。