使用 DOM API（帶有圖形文字 Canvas SVG 或影象檔案）

使用 canvas 元素

HTML 提供了用於構建基於柵格的影象的 canvas 元素。

首先構建一個用於儲存影象畫素資訊的畫布。

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

然後選擇畫布的上下文，在本例中為二維：

var ctx = canvas.getContext('2d');

然後設定與文字相關的屬性：

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

然後將 canvas 元素插入頁面以使其生效：

document.body.appendChild(canvas);

使用 SVG

SVG 用於構建可縮放的基於向量的圖形，可以在 HTML 中使用。

首先建立一個尺寸為 SVG 的元素容器：

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;

然後構建一個具有所需定位和字型特徵的 text 元素：

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

然後新增實際文字以顯示到 textelement：

text.textContent = 'Hello world!';

最後將 text 元素新增到 svg 容器中，並將 svg 容器元素新增到 HTML 文件中：

svg.appendChild(text);
document.body.appendChild(svg);

影象檔案

如果你已有包含所需文字的影象檔案並將其放在伺服器上，則可以新增影象的 URL，然後將影象新增到文件中，如下所示：

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);