傳送門：
http://106.12.120.191/html/Smiling.html
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>