<%@ page language=
"java"
import=
"java.util.*"
pageEncoding=
"utf-8"
%>
<%
String path = request.getContextPath(); String basePath = request.getScheme()+
"://"
+request.getServerName()+
":"
+request.getServerPort()+path+
"/"
; %>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
>
<html>
<head>
<base href=
"<%=basePath%>"
>
<title>circle</title>
<style type=
"text/css"
> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1;
}
</style>
</head>
<body style=
"background:#FBFBFB;"
>
<canvas id=
"myCanvas"
width=
"300"
height=
"150"
style=
"border:1px solid #d3d3d3;"
> not suopport canvas </canvas>
<div id=
"nihao"
></div>
<script>
var
text=document.getElementById(
"nihao"
);
text.innerHTML=
"woshiwuxinguo"
;
var
i=0.9;
var
c=document.getElementById(
"myCanvas"
);
var
ctx=c.getContext(
"2d"
);
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle=
"gray"
;
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle=
"#FBFBFB"
;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle=
"#FFCFCF"
;
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener(
"mouseover"
,
function
(e) {
ctx.beginPath();
ctx.strokeStyle=
"gray"
;
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke();
var
finish=i;
var
step=0;
var
internal=setInterval(
function
(e) {
console.log(
"step:"
+step);
if
(step<finish){
step=step+0.01;
ctx.beginPath();
ctx.strokeStyle=
"#FFCFCF"
;
ctx.arc(0,0,50,0,2*Math.PI*step);
ctx.stroke();
}
else
{
clearInterval(internal);
}
}, 0.5)
}, true) </script>
</body>
</html></pre>