html文件如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Smiling</title><style type="text/css"></style></head><body><canvas id="canvas" width='640' height='480'>Your browser does not support the HTML5 canvas tag.</canvas><script>var app = document.getElementById("canvas");canvas.onmouseover = function() {Crying();}canvas.onmouseout = function() {smile();}function Crying() {var c = document.getElementById("canvas");var ctx = c.getContext("2d"); //绘制2d；var grd = ctx.createRadialGradient(320, 240, 150, 320, 240, 200);grd.addColorStop(0, "red");grd.addColorStop(1, "white");ctx.fillStyle = grd;ctx.strokeStyle = 'black';ctx.beginPath();ctx.arc(320, 240, 200, 0, 2 * Math.PI);ctx.fill();ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(240, 175, 30, 0, 2 * Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(400, 175, 30, 0, 2 * Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(320, 380, 100, 1 * Math.PI, 2 * Math.PI);ctx.stroke();ctx.closePath();}window.onload = function() {smile();}function smile() {var c = document.getElementById("canvas");var ctx = c.getContext("2d"); //绘制2d；var grd = ctx.createRadialGradient(320, 240, 150, 320, 240, 200);grd.addColorStop(0, "red");grd.addColorStop(1, "white");ctx.fillStyle = grd;ctx.strokeStyle = 'black';ctx.beginPath();ctx.arc(320, 240, 200, 0, 2 * Math.PI);ctx.fill();ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(260, 175, 30, 0, 2 * Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(380, 175, 30, 0, 2 * Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.arc(320, 240, 150, 0, -1 * Math.PI);ctx.stroke();ctx.closePath();}</script></body>
</html>
