个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 03:17:44 25 4
gpt4 key购买 nike

我必须创建一个具有 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>

提前致谢

最佳答案

enter image description here

这是让您入门的代码:

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

  • 创建一个包含您的轮子的内存 Canvas 。

  • 创建一个包含尖峰指示器的内存 Canvas 。

  • 旋转 Canvas 并在主 Canvas 上绘制轮子。

  • 在主 Canvas 上绘制指标。

  • 改变下一个循环的旋转 Angular 。

  • 使用 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>

关于html - 像图表一样有 12 个字段的旋转轮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28415385/

25 4 0
文章推荐： c - Init_libMPSSE(), status = SPI_GetNumChannels(noChannels);总是返回 0
文章推荐： python - 在 Python 3 中识别按键的代码
文章推荐： css - 如何覆盖内联样式
文章推荐： css - LESS 将样式应用于元素及其子元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com