HTML5提供了一個新的功能，使得用戶可以在圖片上添加文字。這個功能可以用下面的代碼實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在圖片上寫字</title>
<script>
function writeTextOnImage() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('img');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.font = 'bold 30px Arial';
ctx.fillStyle = 'white';
ctx.fillText(document.getElementById('text').value, 10, 50);
}
</script>
</head>
<body>
<img id="img" src="image.jpg" width="400" height="300">
<br>
<input type="text" id="text" value="輸入要添加的文字">
<br>
<button onclick="writeTextOnImage()">在圖片上添加文字</button>
<br>
<canvas id="canvas"></canvas>
</body>
</html>這個代碼包含一個HTML頁面，其中包含一張圖片、一個輸入框和一個按鈕。當(dāng)用戶在輸入框中輸入文字并點擊按鈕時，該文字將被添加到圖片上。
這個功能是通過利用Canvas元素實現(xiàn)的。Canvas元素是HTML5中的一個新標(biāo)簽，它允許用戶以編程的方式在頁面上繪制圖形。
在這個例子中，我們使用了Canvas來繪制圖片，并在圖片上添加文字。我們首先獲取Canvas對象和上下文，然后將圖片繪制在Canvas上。之后，我們設(shè)置文字的字體、顏色和位置，并將其寫入Canvas中。最后，我們將Canvas轉(zhuǎn)換為一個URL，并將其設(shè)置為新的圖像的SRC屬性。