一,说明
使用HTML画出可动画的多色圆环.效果图如下:
二,代码片段:(完整的代码地址在文章最下面)
<canvas id="canvas_a" width="800" height="800" ></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas_a = document.getElementById('canvas_a'); //获取canvas元素
context_a = canvas_a.getContext('2d'); //获取画图环境,指明为2d
var canvas_b=document.getElementById('canvas_b');
context_b=canvas_b.getContext('2d');
centerX_a = canvas_a.width/2; //Canvas中心点x轴坐标
centerY_a = canvas_a.height/2; //Canvas中心点y轴坐标
rad = Math.PI*2/1000; //将360度分成1000份,那么每一份就是rad度
speed_a = 0; //加载的快慢就靠它了
speed2_a=0;
speed3_a=0;
speed4_a=0;
max_a=503;
was_a=162;
will_a=320;
delay_a=21;
cancel_a=0;
speed_b = 0; //加载的快慢就靠它了
speed2_b=0;
speed3_b=0;
speed4_b=0;
max_b=503
was_b=182;
will_b=300;
delay_b=16;
cancel_b=5;
centerX_b = canvas_b.width/2; //Canvas_b中心点x轴坐标
centerY_b = canvas_b.height/2;
text_a="出港航班";
text_b="进港航班";
canvas_a.οnclick=function(){
window.open('onAndOutFlightHour.html');
}
canvas_b.οnclick=function(){
window.open('onAndOutFlightHour.html');
}
var errorTd=document.getElementById("errorTd");
errorTd.οnclick=function(){
window.open('flightErrorAnalyse.html');
}
//绘制外圈
function wasCircle(n,ctx,centerx,centery){
if(n<=0){
retur