前面我们已经绘制好了太极圆，接下来就是要用JS来实现下面几个功能：
点击“加速/减速”按钮实现太极圆的速度变化:
1.当速度达到一定时，加速或减速按钮便无法点击
2.点击停止按钮后，太极圆停止，按钮的值改为开始
3.在id为cycle的<span>元素中实现显示太极圆的速度
当我们打开网页时，我们想看到太极圆已经在旋转，且<span>中已经有对应的值。要实现旋转我们就要知道需旋转的原理：
我们通过使用rotate(Angle)；方法来旋转画布的坐标系，然后重新将太极圆画到画布上，就可以实现太极圆的旋转，so what?难道我们一直需要用上次的方法重新画一个太极嘛？no no no!当然不是了，我们可以把之前画的太极圆保存下来，之后就只需要使用drawImage(image,x,y)方法就能将太极图放到画布上了。不过放图片之前我们先用clearRect(x,y.width,height)；方法将画布已有内容清除。那么问题来了,怎么样才能保存原来画好的图片呢?
1,获得太极圆的路径
var imgURL=tua.toDataURL("image/png")
2,动态创建 img 元素
var image=document.createElement("img");
3.将获得imgURL赋给image的src属性
image.src = imgURL;
所以我们就已经得到了太极圆的图片引用image
function fang(){
tua.clearRect(-240,-240,480,480);
tua.rotate(-0.05);
tua.drawImage(image,-240,-240);}
于是我们就顺利成章的写出了旋转一次的函数，可是这好像不对啊？那有问题？首先我们得调用函数啊，不然无法动起来，而且调动一次函数肯定是不够的，我们必须持续调动，自动调动函数执行的函数有两个:
setInterval(function,time)与setTimeout(function,time)
因为要一直持续调用函数fang();所以我们决定选择setInterval(function,time);考虑到我们接下来，要实现旋转速度的改变，我们把setInterval(function,time);赋值给一个变量auto:
var auto=self.setInterval(fang,time);
这样就可以通过clearInterval(auto);方法来取消方法的自动调用。接着更改time的值，再调用var auto=self.setInterval(fang,time);我们就可以实现太极圆的旋转速度。time表示自动调用函数的间隔时间，time越小，速度越快，time为数值类型，单位为ms(毫秒)；
那么问题又来了，似乎全程没有看见time的值啊，确实，我们应该在一开始就声明全局变量time.我们在函数外面声明var time=20;(该声明最好放在开头)
即一打开网页我们用20ms的时间间隔来调用fang函数。
那么我们这样做到速度的实时更新呢？因为每次点击按钮都要改变值，所以我们最好把他封装成一个函数,与time类似我们把求出来的速度也提前在函数外面声明：
var num_cycle =0;
同时因为要把这个值赋给id为cycle的<span>元素，我们就得先得到<span>元素的引用：
var cycle = document.getElementById("cycle");
function jisuan(){
num_cycle = 0.05*45/time*1000/360;
num_cycle = num_cycle.toFixed(2);
//取小数点后两位
cycle.innerHTML = num_cycle;
//将计算得到的速度值放到<span>中
}
网页加载后运行函数jisuan();
那么剩下的，我们就只要完成按钮的动作时间就可以了
得到三个按钮的引用：
var inc = document.getElementById("inc");
var dec = document.getElementById("dec");
var stopp = document.getElementById("stop");
在对按钮分别设置动作事件:
function put(){
inc.onclick=function(){
if(time==4){
inc.disabled=true;
//当time减小到4时，就无法再点击加速按钮
}
else{
if(time==36){
dec.disabled=false;
//如果time此时是36的话,点击加速按钮，减速按钮便恢复成可点击状态
}
clearInterval(auto);
time -= 4;
//即time=time-4;
auto=self.setInterval(fan,time);
jisuan();
//更新<span>框内的速度值
}
}
dec.onclick=function(){
if(time==36){
dec.disabled=true;
//当time增加到36时，就无法再点击减速按钮
}
else{
if(time==4){
inc.disabled=false;
//如果time此时是36的话,点击加速按钮，减速按钮便恢复成可点击状态
}
clearInterval(auto);
time += 4;
auto=self.setInterval(fan,time);
jisuan();
}
}
stopp.onclick=function(){
if(stopp.innerHTML=="停止"){
//当按钮名为停止时，我们点击按钮后，速度变为0
clearInterval(auto);
num_cycle = 0;
cycle.innerHTML = num_cycle;
stopp.innerHTML = "开始";
//将按钮的内容变为“开始"
}
else{
jisuan();
auto=self.setInterval(fan,time);
stopp.innerHTML = "停止";}
}
}
put();
好了，大功告成，太极圆就这样可以自由地旋转了！！！
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#message{
position: absolute;
left: 450px;
top: 50px;
width: 120px;
}
.message2{
display:inline-block;
width:60px;}
#cycle{
text-align:right;}
button{
height: 30px;
width: 60px;
margin-left: 75px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<canvas id="canvas" width="480px" height="480px"></canvas>
<span id="message"><span id="cycle" class="message2"></span><span class="message2">：圈/秒</span></span>
<br>
<button id="inc">加速</button>
<button id="dec">减速</button>
<button id="stop">停止</button>
<script>
var taiji=document.getElementById("canvas");
var cycle = document.getElementById("cycle");
var inc = document.getElementById("inc");
var dec = document.getElementById("dec");
var stopp = document.getElementById("stop");
var time=20;
var num_cycle =0;
var tua=taiji.getContext("2d");
tua.beginPath();
tua.translate(240,240);
tua.moveTo(0,-200);
tua.arc(0,-100,100,3/2*Math.PI,1/2*Math.PI,true);
tua.arc(0,100,100,3/2*Math.PI,1/2*Math.PI,false);
tua.arc(0,0,200,1/2*Math.PI,3/2*Math.PI,true);
tua.fillStyle = "black";
tua.fill();
tua.arc(0,0,200,3/2*Math.PI,1/2*Math.PI,true);
tua.stroke();
tua.closePath();
tua.beginPath();
tua.arc(0,-100,20,0,2*Math.PI,true);
tua.fillStyle = "white";
tua.fill();
tua.stroke();
tua.closePath();
tua.beginPath();
tua.arc(0,100,20,0,2*Math.PI,true);
tua.fillStyle = "black";
tua.fill();
tua.stroke();
tua.closePath();
var imgURL=taiji.toDataURL("image/png");
var image=document.createElement("img");
image.src = imgURL;
function fang(){
tua.clearRect(-240,-240,480,480);
tua.rotate(-0.05);
tua.drawImage(image,-240,-240);}
var auto=self.setInterval(fang,time);
function jisuan(){
num_cycle = 0.05*45/time*1000/360;
num_cycle = num_cycle.toFixed(2);
cycle.innerHTML = num_cycle;
}
jisuan();
function put(){
inc.onclick=function(){
if(time==4){
inc.disabled=true;
}
else{
if(time==36){
dec.disabled=false;
}
clearInterval(auto);
time -= 4;
auto=self.setInterval(fang,time);
jisuan();
}
}
dec.onclick=function(){
if(time==36){
dec.disabled=true;
}
else{
if(time==4){
inc.disabled=false;
}
clearInterval(auto);
time += 4;
auto=self.setInterval(fang,time);
jisuan();
}
}
stopp.onclick=function(){
if(stopp.innerHTML=="停止"){
clearInterval(auto);
num_cycle = 0;
cycle.innerHTML = num_cycle;
stopp.innerHTML = "开始";
}
else{
jisuan();
auto=self.setInterval(fang,time);
stopp.innerHTML = "停止";}
}
}
put();
</script>
</body>
</html>
网友评论