Question

我试图创建一个＆＃34;饼图＆＃34;使用画布对象，但我想用图像而不是用颜色填充每个切片。你觉得这可能吗？我也尝试使用＆＃34; createPattern＆＃34;但它也不起作用。有什么建议吗？

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

        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（）;

我怎样才能创建一个＆＃34;饼图＆＃34;在HTML5？

1 个答案: