用canvas画一个机器猫的头像，原图如下：
代码实现效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业2</title>
<style>
#canvas{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 100px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="620" height="620"></canvas>
<script>
var canvas=document.getElementById("canvas");
var pen=canvas.getContext("2d");
// 开始画大脸盘子
pen.lineWidth=5;
pen.strokeStyle="#4d4f50";
pen.fillStyle="#07beea";
pen.beginPath();
pen.arc(315,315,188,0,2*Math.PI);
pen.closePath();
pen.stroke();
pen.fill();
// 开始画腮帮子
pen.lineWidth=3;
pen.fillStyle="#fff";
pen.beginPath();
pen.arc(315,340,123,0,2*Math.PI);
pen.closePath();
pen.stroke();
pen.fill();
// 开始画眼睛
pen.lineWidth=4;
pen.fillStyle="#fff";
pen.beginPath();
pen.strokeRect(245,226,65,35)
pen.fillRect(245,226,65,35)
pen.strokeRect(317,226,65,35)
pen.fillRect(317,226,65,35)
pen.closePath();
// 开始画眼珠子
pen.fillStyle="#000000";
pen.beginPath();
pen.arc(278,243,12,0,2*Math.PI);
pen.arc(350,243,12,0,2*Math.PI);
pen.closePath();
pen.fill();
// 开始画大红鼻子
pen.lineWidth=2;
pen.strokeStyle="#000";
pen.fillStyle="#ff0000";
pen.beginPath();
pen.arc(313,295,26,0,2*Math.PI);
pen.closePath();
pen.fill();
pen.stroke();
// 画小嘴中线
pen.beginPath();
pen.moveTo(313,320)
pen.lineTo(313,420)
pen.closePath();
pen.stroke();
// 画微笑
pen.beginPath();
pen.arc(315,330,89,30*Math.PI/180,150*Math.PI/180);
pen.stroke();
// 画胡须
pen.beginPath();
// 左边
pen.moveTo(275,328);
pen.lineTo(193,328);
pen.moveTo(275,338);
pen.lineTo(193,358);
pen.moveTo(275,318);
pen.lineTo(193,300);
// 右边
pen.moveTo(439,328);
pen.lineTo(357,328);
pen.moveTo(439,358);
pen.lineTo(357,338);
pen.moveTo(439,300);
pen.lineTo(357,318);
pen.closePath();
pen.stroke();
</script>
</body>
</html>
版权声明：本文为Serena_tz原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。