javascript - 如何在 HTML5 中创建 "Pie Chart"？

Question

我正在尝试使用 Canvas 对象创建一个“饼图”，但我想用图像而不是颜色填充每个切片。你认为这可能吗？我也尝试使用“createPattern”，但效果不佳。有什么建议吗？

在这里您可以找到我完成的一些代码，但它正在用颜色填充切片。

        var color = ["#ccc", "#222", "#fff", "#a61712", "#e42f13", "#2b6637", "#f9d90d", "#f4973a", "#002fba", "#800501"];
        var data = [10, 5, 28, 2, 20, 10, 5, 5, 10, 5];

        function getTotal(){
            var total = 0;
            for (var j = 0; j < data.length; j++) {
                total += (typeof data[j] == 'number') ? data[j] : 0;
            }
            return total;
        }

        function plotData() {
            var canvas;
            var ctx;
            var lastend = 0;
            var total = getTotal();

            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < data.length; i++) {
                ctx.fillStyle = color[i];
                ctx.beginPath();
                ctx.moveTo(200,150);
                ctx.arc(200, 150, 150, lastend,lastend+(Math.PI*2*(data[i]/total)),false);
                ctx.lineTo(200,150);
                ctx.strokeStyle = "#000";
                ctx.lineWidth = 5;
                ctx.stroke();
                ctx.fill();
                lastend += Math.PI*2*(data[i]/total);
            }
        }

        plotData();

Answer 1

您有多种选择来用图像或图案填充楔形。

对于任一选项，您都必须执行 ctx.closePath，以便您的图像/图案保持在楔形范围内。

执行 closePath 后，您应该会在填充图案方面取得更大的成功。 :-)

或者，设置由楔形创建的剪切区域:

• 保存未剪辑的上下文状态:ctx.save();
• 创建您的楔形路径。
• 执行 ctx.clip() ，所有新绘图将仅在您的楔形内绘制
• drawImage您的图像或图案填充(使用剪辑，图像将被限制在楔形中)
• 恢复未剪辑的上下文状态:ctx.restore();