<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <canvas id="mycanvas" width="600" height="600" style="border:1px solid blue;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d"); context.beginPath(); //大圆 context.arc(250,250,100,0,Math.PI*2,true); context.fillStyle="yellow"; context.fill(); context.stroke(); context.closePath(); //左眼睛 context.beginPath(); context.arc(200,220,15,0,Math.PI,true); context.stroke(); context.closePath(); //右眼睛 context.beginPath(); context.arc(300,220,15,0,Math.PI,true); context.stroke(); context.closePath(); //嘴巴 context.beginPath(); context.arc(250,260,55,0,Math.PI,false); context.fillStyle="white"; context.fill(); context.closePath(); context.stroke(); //以下都是牙齿 context.beginPath(); context.moveTo(210,260); context.lineTo(210,296); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(230,260); context.lineTo(230,310); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(250,260); context.lineTo(250,315); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(270,260); context.lineTo(270,312); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(290,260); context.lineTo(290,298); context.stroke(); context.closePath(); </script> </body> </html>
效果图：
