效果：
HTML代码为：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" > <title>笑脸</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <script src="js/jquery.min.js"></script> <script src="js/canvas.js"></script> </head> <body> <canvas id="Canvas" width="640" height="480">抱歉！浏览器不支持。</canvas> </body> </html>
JS代码为：
$(function(){ canvasruns(); function canvasruns(){ var canvas=document.getElementById('Canvas'); var context=canvas.getContext('2d'); context.beginPath();//起始一条路径，或重置当前路径 context.arc(320,240,200,0,2*Math.PI);//创建圆形或部分圆-x轴、y轴、半径、起始角、结束角 context.fillStyle='yellow';//设置或返回用于填充绘画的颜色、渐变或模式 context.fill();//填充当前绘图（路径） context.strokeStyle='black';//设置或返回用于笔触的颜色、渐变或模式 context.stroke();//填充已定义的路径线条颜色 context.closePath();//关闭从当前点回到起始点的路径 context.beginPath(); context.arc(270,175,30,0,2*Math.PI); context.fillStyle='white'; context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(370,175,30,0,2*Math.PI); context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(320,240,150,0,1*Math.PI); context.strokeStyle='red'; context.stroke(); context.closePath(); } });