我想用畫布對象創建一個“餅圖”，但我想用圖像而不是顏色填充每個切片。你認為這是可能的嗎？我試圖使用“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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html5如何绘制饼图,如何在HTML5中创建“饼图”？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。