HTML5中的矩形上三片葉子是一種常見的圖形，下面是一份實現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<title>矩形上三片葉子</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#87CEFA"; // 設(shè)置填充色
ctx.fillRect(50, 50, 100, 100); // 畫矩形
ctx.beginPath();
ctx.moveTo(50, 50); // 三角形第一個點
ctx.lineTo(75, 25); // 三角形第二個點
ctx.lineTo(100, 50); // 三角形第三個點
ctx.closePath(); // 閉合三角形
ctx.fill(); // 填充三角形
ctx.beginPath();
ctx.moveTo(75, 25); // 第一個葉子第一個點
ctx.lineTo(60, 40); // 第一個葉子第二個點
ctx.lineTo(70, 50); // 第一個葉子第三個點
ctx.lineTo(75, 35); // 第一個葉子第四個點
ctx.closePath(); // 閉合第一個葉子
ctx.fillStyle = "#32CD32"; // 設(shè)置第一個葉子填充色
ctx.fill(); // 填充第一個葉子
ctx.beginPath();
ctx.moveTo(75, 25); // 第二個葉子第一個點
ctx.lineTo(90, 40); // 第二個葉子第二個點
ctx.lineTo(80, 50); // 第二個葉子第三個點
ctx.lineTo(75, 35); // 第二個葉子第四個點
ctx.closePath(); // 閉合第二個葉子
ctx.fill(); // 填充第二個葉子
ctx.beginPath();
ctx.moveTo(75, 25); // 第三個葉子第一個點
ctx.lineTo(75, 10); // 第三個葉子第二個點
ctx.lineTo(85, 20); // 第三個葉子第三個點
ctx.lineTo(75, 25); // 第三個葉子第四個點
ctx.closePath(); // 閉合第三個葉子
ctx.fill(); // 填充第三個葉子
</script>
</body>
</html>代碼中首先創(chuàng)建了一個canvas元素，并設(shè)置其寬高為200px，然后獲取該元素的上下文對象。接下來使用fillStyle屬性設(shè)置矩形的填充色，使用fillRect方法畫出一個長寬均為100px的矩形，起始點位置為(50, 50)，因此該矩形的左上角位置為(50, 50)，右下角位置為(150, 150)。
接下來，使用beginPath開啟新的路徑，并使用moveTo、lineTo依次連接三個點，畫出了一個三角形。然后使用fill方法填充三角形，形成三片葉子的下部分。
最后使用三次beginPath、moveTo、lineTo，分別畫出三片葉子的形狀，并使用fillStyle屬性分別設(shè)置填充色，最后使用fill方法完成填充。
這份代碼簡單易懂，很好地演示了如何使用HTML5的canvas元素來繪制圖形，并以矩形上三片葉子為例，展示了繪圖的完整流程。