<!doctype html>
<html>
<head>
<title>
</title>
</head>
<style>
</style>
<body>
<canvas width=="500" height="500" id="demo">
您的浏览器不支持canvas！
</canvas>
<script>
var canvas = document.getElementById(‘demo‘);
// alert(canvas);
var ctx = canvas.getContext(‘2d‘);
//alert(ctx)
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,10);
ctx.closePath();
ctx.stroke();
//end
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,70);
ctx.closePath();
ctx.stroke();
//end
ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(290,60);
ctx.closePath();
ctx.stroke();
//end
ctx.beginPath();
ctx.moveTo(100,70);
ctx.lineTo(290,60);
ctx.closePath();
ctx.stroke();
//end
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.closePath();
ctx.stroke();
//左空心眼睛
ctx.beginPath();
ctx.arc(120, 100, 10, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.closePath();
ctx.stroke();
//右空心眼睛
ctx.beginPath();
ctx.arc(150, 100, 10, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.closePath();
ctx.stroke();
//右实心眼睛
ctx.beginPath();
ctx.arc(150, 100, 3, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.fillStyle = "#000000";
ctx.fill();
ctx.shadowOffsetX = 0; // 设置水平位移
ctx.shadowOffsetY = 0; // 设置垂直位移
ctx.shadowBlur = 10; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色
ctx.closePath();
ctx.stroke();
//左实心眼睛
ctx.beginPath();
ctx.arc(120, 100, 3, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.fill();
ctx.shadowOffsetX = 0; // 设置水平位移
ctx.shadowOffsetY = 0; // 设置垂直位移
ctx.shadowBlur = 10; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色
ctx.closePath();
ctx.stroke();
//嘴
ctx.beginPath();
ctx.arc(135 , 130, 10, 10, false);
ctx.strokeStyle = "#000";
ctx.closePath();
ctx.stroke();
//线 帽子线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,70);
ctx.lineTo(100,150);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200,10);
ctx.lineTo(200,100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(290,60);
ctx.lineTo(290,130);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
原文：http://www.cnblogs.com/xinlinux/p/3999140.html