如果你想在網頁中添加一些簡單的圖形或者其他的視覺效果，那么 JavaScript 繪圖便是您的首選。JavaScript 能夠通過在瀏覽器環境中創建 Canvas（畫布）元素，來動態繪制各種圖形和內容。在這篇教程中，我們將研究 JavaScript 繪圖的基礎知識，并使用簡單的示例來演示如何進行 HTML5 Canvas 構建。

首先，讓我們看一下如何創建一個簡單的 HTML5 Canvas 畫布。我們將使用 document.createElement 方法創建一個新的 Canvas 元素，并使用 Document 對象中的 appendChild 方法將其插入到頁面的 DOM 樹中。

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
document.body.appendChild(canvas);

現在我們已經創建了我們的畫布，讓我們開始繪制簡單的形狀和圖像。下面是一個用于繪制一個填充矩形的示例代碼：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

在這個簡單的示例中，我們使用了 Canvas 上下文對象的 fillStyle 屬性來設置矩形的顏色，并使用 fillRect 方法來從 Canvas 的左上角開始繪制寬 100 像素、高 100 像素的填充矩形（位于 Canvas 的 x 坐標軸 10 和 y 坐標軸 10 上）。

接下來，我們將創建第二個示例，在 HTML5 Canvas 中繪制一些基本幾何圖形。在這里我們將繪制一個簡單的 SVG 模擬庫，該庫允許我們在 Canvas 上繪制一些基本形狀和對象。這里是一個包含畫布和簡單繪圖命令的示例代碼：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function Circle(x, y, radius, fillStyle, strokeStyle, lineWidth) {
this.x = x || 0;
this.y = y || 0;
this.radius = radius || 0;
this.fillStyle = fillStyle || '#000';
this.strokeStyle = strokeStyle || '#000';
this.lineWidth = lineWidth || 1;
}
Circle.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = this.fillStyle;
ctx.fill();
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeStyle;
ctx.stroke();
ctx.closePath();
};
var myCircle = new Circle(100, 100, 50, 'yellow', 'black', 3);
myCircle.draw();

在這些示例中，我們基本介紹了如何在 HTML5 Canvas 中繪制簡單圖形和圖像。這是一個很好的起點，因為您現在已經掌握了基本的命令和概念。利用這些簡單的示例，您可以開始構建更加復雜的內容和效果，例如繪制 3D 形狀和動畫等等。