HTML5提供了豐富的繪圖功能，可以使用canvas元素來進(jìn)行二維圖形繪制，也可以使用SVG元素來創(chuàng)建矢量圖形。在這里我們將演示如何使用HTML5的canvas元素來制作一個(gè)簡(jiǎn)易的畫圖作品。

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// 獲取canvas元素
var canvas = document.getElementById("myCanvas");
// 獲取繪圖上下文
var ctx = canvas.getContext("2d");
// 監(jiān)聽鼠標(biāo)事件
var isDrawing = false;
canvas.addEventListener("mousedown", function(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
});
canvas.addEventListener("mousemove", function(e) {
if(isDrawing) {
ctx.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
ctx.stroke();
}
});
canvas.addEventListener("mouseup", function(e) {
isDrawing = false;
});
</script>

代碼中，canvas元素的id為myCanvas，設(shè)置了寬度和高度為500。在JavaScript中，通過document.getElementById方法獲取canvas元素，然后使用getContext方法獲取canvas元素的繪圖上下文。繪圖上下文提供了豐富的繪圖函數(shù)，例如beginPath開始一條新的路徑，moveTo將畫筆移動(dòng)到指定點(diǎn)，lineTo連接兩個(gè)點(diǎn)并繪制直線，stroke繪制路徑等等。

在代碼中，我們監(jiān)聽了canvas元素的mousedown、mousemove、mouseup事件，分別代表鼠標(biāo)按下、鼠標(biāo)移動(dòng)、鼠標(biāo)抬起。當(dāng)鼠標(biāo)按下時(shí)，設(shè)置isDrawing為true，代表正在繪圖，并使用beginPath開始一條新的路徑，并使用moveTo將畫筆移動(dòng)到當(dāng)前鼠標(biāo)的位置。當(dāng)鼠標(biāo)移動(dòng)時(shí)，判斷isDrawing是否為true，如果是，使用lineTo連接兩個(gè)點(diǎn)并繪制直線，并使用stroke繪制路徑。當(dāng)鼠標(biāo)抬起時(shí)，設(shè)置isDrawing為false，代表繪圖結(jié)束。