效果：
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(); } });