canvas 刻度倒计时

最新推荐文章于 2024-06-17 14:02:51 发布

原创最新推荐文章于 2024-06-17 14:02:51 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

html 同时被 2 个专栏收录

1 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

canvas 刻度倒计时

效果
test.html
example.js

效果

在这里插入图片描述

test.html

<head>
    <title>A Dial Showing the Degrees of a Circle</title>

    <style>
      body {
         background: #eeeeee;
      }

      #canvas {
         background: #ffffff;
         cursor: crosshair;
         margin-left: 10px;
         margin-top: 10px;
         -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
         -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
         box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
      }

    </style>
  </head>

   <body>
      <canvas id='canvas' width='650' height='450'>
         Canvas not supported
      </canvas>

    <script src = 'example.js'></script>
  </body>
</html>

example.js

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),

    RING_INNER_RADIUS = 35,

    TICK_WIDTH = 10,

    circle = { x: canvas.width/2,
               y: canvas.height/2,
               radius: 150
             };


function drawDial() {
   drawTicks();
}

context.lineWidth = 2
inner = 0
   
function drawTick(angle, radius, cnt) {
   var tickWidth = TICK_WIDTH
   
   context.beginPath();

   context.moveTo(circle.x + Math.cos(angle) * (radius - tickWidth),
                  circle.y + Math.sin(angle) * (radius - tickWidth));

   context.lineTo(circle.x + Math.cos(angle) * (radius),
                  circle.y + Math.sin(angle) * (radius));
   if( cnt <= inner)
      context.strokeStyle = 'rgba(250, 250, 0, 0.6)';
   else
      context.strokeStyle = 'rgba(100, 140, 230, 0.9)';
   context.stroke();
}

function drawTicks() {
   var radius = circle.radius + RING_INNER_RADIUS,
       ANGLE_MAX = 2*Math.PI,
       ANGLE_DELTA = Math.PI/64,
       lastTick = 0;

   context.clearRect(0,0,canvas.width,canvas.height); 
   
   for (var angle = 1.5*Math.PI, cnt = 0; cnt < 259;
                                cnt++) {
      drawTick(angle, radius, cnt++); 
      if (angle != 0) angle -= ANGLE_DELTA
      else  {
         angle = 1.5*Math.PI + ANGLE_MAX-ANGLE_DELTA*lastTick
         lastTick++
      }
   }

   inner++
   if (inner == 259) inner = 0
   // drawTick(1.5*Math.PI, radius, 1);
   context.restore();
}

// Initialization....................................................

// context.shadowOffsetX = 2;
// context.shadowOffsetY = 2;
// context.shadowBlur = 4;

context.textAlign = 'center';
context.textBaseline = 'middle';
// drawGrid('lightgray', 10, 10);
// drawDial();
setInterval(drawDial,200)