html5如何绘制饼图,如何在HTML5中创建“饼图”？

我想用画布对象创建一个“饼图”，但我想用图像而不是颜色填充每个切片。你认为这是可能的吗？我试图使用“createPattern”，但它不工作。有什么建议么？如何在HTML5中创建“饼图”？

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

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

2014-03-25

Fabry