像图表一样有 12 个字段的旋转轮

Question

我必须创建一个具有 12 个字段的旋转轮，如下图所示 link:http://www.resilienciacomunitaria.org/ 我如何通过哪种方法创建？我为此使用了 canvas 但没有成功我使用了 d3.js svg 但没有成功 .

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="600" height="600" 
style="background-color:#ffff">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height /2; //400
//alert(radius);

//draw a circle again and agian 
  ctx.translate(radius, radius);


    radius =radius*0.85;
    setInterval(drawCircle, 50);
    function drawCircle() {
        var pos = .01;
        var length = 100;
        var width = 40;
            drawFace(ctx, radius);
            drawHand(ctx, pos, length, width); 


 }
function drawFace(ctx,radius){

      ctx.beginPath();
      ctx.arc(0, 0, 50, 0, 2 * Math.PI, false);
      ctx.fillStyle = '#ffff';
      ctx.strokeStyle = 'blue';
      ctx.fill();
      ctx.stroke(); 


      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, false);
      ctx.strokeStyle = 'yellow';
       ctx.fillStyle = 'blue';
      ctx.lineWidth = 50;  
      ctx.fill();
      ctx.stroke();

}
function drawHand(ctx, pos, length, width) {

  ctx.beginPath();
    ctx.lineWidth = 30;


    ctx.moveTo(-radius,0);
    ctx.lineTo(radius, 0);
    ctx.moveTo(-radius,150);
    ctx.lineTo(radius, -150);
    ctx.moveTo(-radius,-150);
    ctx.lineTo(radius, 150);
    ctx.moveTo(-radius,380);
    ctx.lineTo(radius, -380);
    ctx.moveTo(-radius,-380);
    ctx.lineTo(radius, 380);
    ctx.moveTo(0, -radius);
    ctx.lineTo(0, radius);

    ctx.stroke();
/*
    ctx.globalCompositeOperation='destination-over';
    ctx.font="20px Verdana";
    ctx.fillStyle = 'white';
    ctx.fillText("Explore Zero",180,180);

    ctx.stroke();

    ctx.globalCompositeOperation='source-over';*/
    ctx.rotate(-pos);

}


</script>   
</body>
</html>

提前致谢

Answer 1

您可以将 "wheel" 图片放在网站上并旋转它。

document.getElementById("TheImage").style.transform = "rotate("+YourAngle+"deg)";

您还需要将 "pointer" 图像放在 "wheel" 图像之上。（你不会旋转这个）

Answer 2

这是让您入门的代码：

您可以根据自己的具体需要设置样式

创建一个内存中 canvas 包含你的轮子。
在内存中创建一个 canvas 包含您的尖峰指标。
旋转canvas并在主canvas上画轮子。
在主canvas上绘制指标。
更改下一个循环的旋转角度。
重复，重复，使用 requestAnimationFrame 重复。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var PI2=Math.PI*2;
var myData = [1,2,3,4,5,6,7,8,9,10,11,12];
var cx=150;
var cy=150;
var radius=150;

var wheel=document.createElement('canvas');
var wheelCtx=wheel.getContext('2d');

var indicator=document.createElement('canvas');
var indicatorCtx=indicator.getContext('2d');


var angle=PI2-PI2/4;

var myColor = [];
for(var i=0;i<myData.length;i++){ myColor.push(randomColor()); }

makeWheel();
makeIndicator();

requestAnimationFrame(animate);

function makeWheel(){

  wheel.width=wheel.height=radius*2+2;
  wheelCtx.lineWidth=1;
  wheelCtx.font='24px verdana';
  wheelCtx.textAlign='center';
  wheelCtx.textBaseline='middle';

  var cx=wheel.width/2;
  var cy=wheel.height/2;

  var sweepAngle=PI2/myData.length;
  var startAngle=0;
  for(var i=0;i<myData.length;i++){

    // calc ending angle based on starting angle
    var endAngle=startAngle+sweepAngle;

    // draw the wedge
    wheelCtx.beginPath();
    wheelCtx.moveTo(cx,cy);
    wheelCtx.arc(cx,cy,radius,startAngle,endAngle,false);
    wheelCtx.closePath();
    wheelCtx.fillStyle=myColor[i];
    wheelCtx.strokeStyle='black';
    wheelCtx.fill();
    wheelCtx.stroke();

    // draw the label
    var midAngle=startAngle+(endAngle-startAngle)/2;
    var labelRadius=radius*.85;
    var x=cx+(labelRadius)*Math.cos(midAngle);
    var y=cy+(labelRadius)*Math.sin(midAngle);
    wheelCtx.fillStyle='gold';
    wheelCtx.fillText(myData[i],x,y);
    wheelCtx.strokeText(myData[i],x,y);

    // increment angle
    startAngle+=sweepAngle;
  }


}

function makeIndicator(){

  indicator.width=indicator.height=radius+radius/10;
  indicatorCtx.font='18px verdana';
  indicatorCtx.textAlign='center';
  indicatorCtx.textBaseline='middle';
  indicatorCtx.fillStyle='skyblue';
  indicatorCtx.strokeStyle='blue';
  indicatorCtx.lineWidth=1;

  var cx=indicator.width/2;
  var cy=indicator.height/2;

  indicatorCtx.beginPath();
  indicatorCtx.moveTo(cx-radius/8,cy);
  indicatorCtx.lineTo(cx,cy-indicator.height/2);
  indicatorCtx.lineTo(cx+radius/8,cy);
  indicatorCtx.closePath();
  indicatorCtx.fillStyle='skyblue'
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.beginPath();
  indicatorCtx.arc(cx,cy,radius/3,0,PI2);
  indicatorCtx.closePath();
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.fillStyle='blue';
  indicatorCtx.fillText('Prizes',cx,cy);
}


function animate(time){
  ctx.clearRect(0,0,cw,ch);
  ctx.translate(cw/2,ch/2);
  ctx.rotate(angle);
  ctx.drawImage(wheel,-wheel.width/2,-wheel.height/2);
  ctx.rotate(-angle);
  ctx.translate(-cw/2,-ch/2);
  ctx.drawImage(indicator,cw/2-indicator.width/2,ch/2-indicator.height/2)
  angle+=PI2/360;
  requestAnimationFrame(animate);
}


function randomColor(){ 
  return('#'+Math.floor(Math.random()*16777215).toString(16));
}

body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}

<canvas id="canvas" width=400 height=300></canvas>

Answer 3

这是一篇用了 20 分钟写成的 fiddle，希望对您有所帮助。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
var lines = new Array();
lines[0] = new Array();
lines[0] = ["Prize 1","#000000"];
lines[1] = new Array();
lines[1] = ["Prize 2","#ffff00"];
lines[2] = new Array();
lines[2] = ["Prize 3","#ff00ff"];
lines[3] = new Array();
lines[3] = ["Prize 4","#00ffff"];
lines[4] = new Array();
lines[4] = ["Prize 5","#00ff00"];

var TO_RADIANS = Math.PI / 180;
var angle = 360 / lines.length; //to see how far apart the lines need to be
var angle_offset = 0; //this will determine the spinning
var angle_speed = 1; //degrees per cycle
var center_offset = 20; //the radius of your spinner in the middle

function animate() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    angle_offset+=angle_speed;
    ctx.font="20px Verdana";
    ctx.fillStyle="#000000";
    for (i=0; i<lines.length; i++) {
        ctx.fillStyle=lines[i][1];
        ctx.save();
        ctx.translate(canvas.width/2, canvas.height/2);
        ctx.rotate((angle * i + angle_offset) * TO_RADIANS);
        //Here you can also decorate with boxes and stuff
        ctx.fillText(lines[i][0],center_offset,0); 
        ctx.restore();
    }
    requestAnimationFrame(animate);
}

animate();

<canvas id="canvas"></canvas>

像图表一样有 12 个字段的旋转轮

Rotation wheel with 12 fields like a chart

html

css

html5-canvas