如何为每个片段添加悬停效果（html5画布）

嗨，你能帮我设置这个代码吗。我不太擅长html5

如果您的浏览器不支持HTML5画布，则会显示此文本。

$（文档）.ready（函数（）{
//为图表初始化一些变量
变量
画布=$（“#画布”）[0]；
var ctx=canvas.getContext（'2d'）；
var数据=[75,68,32,95,20,51]；
变量颜色=[“7E3817”、“C35817”、“EE9A4D”、“A0C544”、“348017”、“307D7E”]；
var center=[canvas.width/2，canvas.height/2]；
变量半径=数学最小值（canvas.width、canvas.height）/2；
var lastPosition=0，total=0；
var pieData=[]；
//把图表上的所有数据加起来
对于（数据中的变量i）{total+=data[i]；}
//为每个切片填充数组
用于（数据中的var i）{
pieData[i]=[]；
pieData[i]['value']=data[i]；
pieData[i]['krasa']=颜色[i]；
pieData[i]['startAngle']=2*Math.PI*lastPosition；
pieData[i]['endAngle']=2*Math.PI*（lastPosition+（data[i]/total））；
lastPosition+=数据[i]/总计；
}
函数绘图图（）
{
对于（变量i=0；i

---

如何为每个切片添加悬停效果？

在画布上绘制楔子后，它们将成为更大图像中的像素

此时无法跟踪单个饼图楔块。因此，无法跟踪任何特定楔块上的悬停

但是…你有几个选择

选项#1--进行您自己的命中测试，以确定您单击了哪个饼楔

它看起来像这样（我还没有测试过！！！）

var chartStartAngle=0；//您开始以0角绘制饼图
功能手柄ChartClick（clickEvent）{
//获取单击时鼠标光标相对于画布的位置
var mouseX=clickEvent.pageX-this.offsetLeft；
var mouseY=clickEvent.pageY-this.offsetTop；
//点击是否在饼图中？
var xFromCenter=mouseX-center[0]；
var yFromCenter=mouseY-center[1]；
var distance fromcenter=Math.sqrt（Math.pow（Math.abs（xFromCenter），2）+Math.pow（Math.abs（yFromCenter，2））；
if（distanceFromCenter=pieData[i]['startAngle']&&clickAngle
$(document).ready(function() {
    // initialize some variables for the chart
    var 

canvas = $("#canvas")[0];
        var ctx = canvas.getContext('2d');
        var data = [75,68,32,95,20,51];
        var colors = ["#7E3817", "#C35817", "#EE9A4D", "#A0C544", "#348017", "#307D7E"];
        var center = [canvas.width / 2, canvas.height / 2];
        var radius = Math.min(canvas.width, canvas.height) / 2;
        var lastPosition = 0, total = 0;
        var pieData = [];

    // total up all the data for chart
    for (var i in data) { total += data[i]; }

    // populate arrays for each slice
    for(var i in data) {
        pieData[i] = [];
        pieData[i]['value'] = data[i];
        pieData[i]['krasa'] = colors[i];
        pieData[i]['startAngle'] = 2 * Math.PI * lastPosition;
        pieData[i]['endAngle'] = 2 * Math.PI * (lastPosition + (data[i]/total));
        lastPosition += data[i]/total;
    }

function drawChart()
    {
        for(var i = 0; i < data.length; i++)
        {
            var gradient = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );
            gradient.addColorStop( 0, "#ddd" );
            gradient.addColorStop( 1, colors[i] );
            ctx.beginPath();
            ctx.moveTo(center[0],center[1]);
            ctx.arc(center[0],center[1],radius,pieData[i]['startAngle'],pieData[i]['endAngle'],false);
            ctx.lineTo(center[0],center[1]);
            ctx.closePath();
            ctx.fillStyle = gradient;
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#fff";
            ctx.stroke();
        }
    }

    drawChart(); // first render
});

var chartStartAngle=0;  // you started drawing the pie at angle 0

function handleChartClick ( clickEvent ) {

    // Get the mouse cursor position at the time of the click, relative to the canvas
    var mouseX = clickEvent.pageX - this.offsetLeft;
    var mouseY = clickEvent.pageY - this.offsetTop;

    // Was the click inside the pie chart?
    var xFromCenter = mouseX - center[0];
    var yFromCenter = mouseY - center[1];
    var distanceFromCenter = Math.sqrt( Math.pow( Math.abs( xFromCenter ), 2 ) + Math.pow( Math.abs( yFromCenter ), 2 ) );

    if ( distanceFromCenter <= radius ) {

      // You clicked inside the chart.
      // So get the click angle 
      var clickAngle = Math.atan2( yFromCenter, xFromCenter ) - chartStartAngle;

      if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;

      for ( var i in pieData ) {
        if ( clickAngle >= pieData[i]['startAngle'] && clickAngle <= pieData[i]['endAngle'] ) {
          // You clicked on pieData[i]
          // So do your effect here!
          return;
        }
      }
    }
  }