Question

我必须创建一个包含12个字段的旋转轮，如下图链接所示：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

你可以把＆＃34; wheel＆＃34;在网站上的图像，然后旋转它。

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

此外，您还需要使用＆＃34;指针＆＃34;图像位于＆＃34; wheel＆＃34;图片。（你不会旋转这个）

Answer 2

enter image description here

以下代码可帮助您入门：

您可以根据自己的特定需求设置样式

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

＆＃13;

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));
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是20分钟写的小提琴，希望它有所帮助。

＆＃13;

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();

＆＃13;

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

＆＃13;

旋转轮有12个字段，如图表

3 个答案: