效果图：
源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>蓝胖子</title><style>canvas {display:block;margin:0 auto;}</style></head><body><div><canvas id="canvas"></canvas></div><script>var oCanvas = document.getElementById("canvas");oCanvas.width = 600;oCanvas.height = 600;var context = oCanvas.getContext("2d");// 脑袋context.beginPath();context.arc(300, 300, 250, 0, Math.PI * 2);context.lineWidth = "5";context.stroke();context.fillStyle = "rgb(34,118,207)";context.fill();// 脸context.beginPath();context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 嘴context.beginPath();context.arc(300, 460, 50, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "red";context.fill();// 眼context.beginPath();context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 鼻context.beginPath();context.lineWidth = "3";context.arc(300, 290, 30, 0, 2 * Math.PI);context.stroke();context.fillStyle = "red";context.fill();// 胡子context.lineWidth="5";beard(125,294,230,335);beard(113,370,222,366);beard(125,434,222,398);beard(376,335,465,282);beard(385,369,490,354);beard(385,400,488,420);// 画胡子的方法function beard(x1, y1, x2, y2) {context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}</script></body></html>
