指南针神童的风向

更新2021：示例代码不再运行，因为Weather Underground（Wunderground）API在2018年被弃用。但是，可以修改代码以使用不同的数据提供程序。

如何制作千分表

问题是如何建立一个显示风向信息的百分表。这个代码片段向您展示了如何用最少的代码量创建一个看起来专业的代码。它可以很容易地适应其他应用程序和数据。

OP最初试图通过一个冗长而复杂的CSS转换列表来实现这一点。然而，一个简单得多的解决方案是使用具有缩放背景图像和动态定位指示针的CANVAS标签。

最低限度的代码如下所示。如完整片段所示，通过一些额外的样式，您可以为任何应用程序实现专业外观的百分表。

尝试演示

要查看演示，请单击"；显示代码片段"然后"；运行代码片段"；（您可能需要向下滚动才能看到它）。演示显示了德国柏林的当前风向。单击"；测试"；按钮设置仪表的动画。

CSS

#compass {
  background: url(YourGaugeBackground.jpg); 
  background-size: cover;
}

Javascript：

function setCompass(degrees) {
      var x, y, r, ctx, radians;
      ctx = window.compass.getContext("2d");
      radians = 0.0174533 * (degrees - 90);
      x = ctx.canvas.width / 2;
      y = ctx.canvas.height / 2; 
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height );
      ctx.beginPath();
      ctx.lineWidth = 10;
      ctx.moveTo(x, y);
      ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians));
      ctx.stroke();
}

HTML

<canvas id="compass" height=200 width=200></canvas>

function setCompass(degrees) {
  var x, y, r, ctx, radians;
  
  ctx = window.compass.getContext("2d");
  
  // subtract 90 so that north is up then convert to radians
  radians = 0.0174533 * (degrees - 90);
  
  // calc compass centre 
  x = ctx.canvas.width / 2;
  y = ctx.canvas.height / 2; 
  r = x * 0.8;
  
  // clear 
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height );
  ctx.beginPath();
  // optional styling
  ctx.strokeStyle = "rgba(255,0,0,0.5)";
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.lineCap = 'round';
  ctx.shadowOffsetX = 4;
  ctx.shadowOffsetY = 4;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
  // draw compass needle
  ctx.lineWidth = 10;
  ctx.moveTo(x, y);
  ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians));
  ctx.stroke();
}
// ajax call for city weather data
function getWeatherForecast() {
  var url = 'http://api.wunderground.com/api/eb7a37c339cfd624/geolookup/conditions/forecast10day/lang:EN/q/Germany/Berlin.json';
  $.getJSON(url, function(data) {
    window.debug.innerHTML = JSON.stringify(data, false, '  ');
    $('#status').html(
      //'<img src="' + data.current_observation.icon_url + '">' +
      data.location.city + ', ' +
      data.location.country_name + ': ' +
      data.current_observation.temperature_string + ', ' +
      'Wind ' +
      data.current_observation.wind_string + ', ' +
      data.current_observation.wind_degrees + '°'
    );
    setCompass(data.current_observation.wind_degrees);
  });
}
$('#test').click(function() {
  $(this).attr('disabled', true);
  var d=0, id = setInterval(function() {
    setCompass( d );
    d += 10;
    if (d > 360) {
      clearInterval(id);
      $('#test').attr('disabled',false);
      getWeatherForecast();
    }
  }, 100);
  
});

$(document).ready(function() {
  getWeatherForecast();
});

#compass {
  background: url(http://i.imgur.com/44nyA.jpg);
  background-size: cover;
}
body {
  font-family: sans-serif;
}
#debug {
  background-color: aliceblue;
  border: 1px solid black;
  padding: 0.5em;
  width: 90%;
  height: 50em;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="test">Test</button> scroll down to view json data<br>
<canvas id="compass" height=200 width=200></canvas>
<div id="status">Berlin, Germany</div>
json data source: <a href="http://api.wunderground.com" target="_blank">Weather Underground</a><br>
<textarea id="debug" spellcheck=false></textarea>