javascript使用canvas實(shí)現(xiàn)餅狀圖效果
更新時(shí)間：2020年09月08日 15:12:07 作者：HaiRong_21
這篇文章主要為大家詳細(xì)介紹了javascript使用canvas實(shí)現(xiàn)餅狀圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
使用canvas寫(xiě)一個(gè)餅狀圖，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id='canvas' width='800' height='400' style="border: 1px solid red;"></canvas>
<script>
let data = [
{ title: "服飾1", money: 400 },
{ title: "服飾2", money: 300 },
{ title: "服飾3", money: 400 },
{ title: "服飾4", money: 200 },
{ title: "服飾5", money: 500 },
{ title: "服飾6", money: 180 },
{ title: "服飾7", money: 500 }]
/** @type {HTMLCanvasElement} */
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
let r = 100;
let money = function (obj, sum) {
for (let i = 0; i < obj.length; i++) {
sum += data[i].money
}
return sum;
}
let totalmoney = money(data, 0);
let nowsum = 0;
let start = 0;
let end = 0;
let R = 100;
let i=0;
data.forEach(function (item) {
ctx.beginPath()
nowsum += item.money;
end = (nowsum / totalmoney)
ctx.moveTo(150, 150);
ctx.arc(150, 150, R, start*Math.PI*2, end*Math.PI*2)
start = end;
//產(chǎn)生隨機(jī)顏色
ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
ctx.rect(350,5+(35*i),30,30);
ctx.font="14px 黑體"
ctx.fillText(item.title,400,25+(35*i))
ctx.strokeStyle = "gray"
ctx.fill();
ctx.stroke();
i++;
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js canvas實(shí)現(xiàn)寫(xiě)字動(dòng)畫(huà)效果
- JS+canvas繪制的動(dòng)態(tài)機(jī)械表動(dòng)畫(huà)效果
- JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)炫目的色相球動(dòng)畫(huà)效果實(shí)例
- javascript+HTML5的Canvas實(shí)現(xiàn)Lab單車(chē)動(dòng)畫(huà)效果
- js+canvas實(shí)現(xiàn)畫(huà)板功能
- js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)功能
- js實(shí)現(xiàn)貪吃蛇游戲 canvas繪制地圖
- 使用js和canvas實(shí)現(xiàn)時(shí)鐘效果
- javascript canvas實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘例子
- JS Canvas接口和動(dòng)畫(huà)效果大全
相關(guān)文章
npm install jquery報(bào)錯(cuò)問(wèn)題解決
這篇文章主要為大家介紹了npm install jquery報(bào)錯(cuò)問(wèn)題解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽
這篇文章主要介紹了JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JS 滾動(dòng)事件window.onscroll與position：fixed寫(xiě)兼容IE6的回到頂部組件
這篇文章主要介紹了JS 滾動(dòng)事件window.onscroll與position：fixed寫(xiě)兼容IE6的回到頂部組件的相關(guān)資料,需要的朋友可以參考下2016-10-10
console.log()、alert()?都是JavaScript中用于在開(kāi)發(fā)過(guò)程中輸出信息或向用戶(hù)顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場(chǎng)景以及展示方式,本文將給大家介紹JavaScript?中怎么看數(shù)據(jù)返回值,需要的朋友可以參考下2024-07-07
JSON與String互轉(zhuǎn)的實(shí)現(xiàn)方法(Javascript)
下面小編就為大家?guī)?lái)一篇JSON與String互轉(zhuǎn)的實(shí)現(xiàn)方法(Javascript) 。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦
2016-09-09 
alert中斷settimeout計(jì)時(shí)功能
在測(cè)試過(guò)程中發(fā)現(xiàn)alert會(huì)中斷settimeout的計(jì)時(shí)功能,關(guān)閉對(duì)話(huà)框后，settimeout的時(shí)間會(huì)重頭開(kāi)始計(jì)時(shí)，而不是從中斷處，感興趣的朋友可以了解下
2013-07-07 
本文通過(guò)實(shí)例代碼給大家介紹了BootStrap Table復(fù)選框默認(rèn)選中功能(從數(shù)據(jù)庫(kù)獲取到對(duì)應(yīng)的狀態(tài)進(jìn)行判斷是否為選中狀態(tài))，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-07-07 
JsonServer安裝及啟動(dòng)過(guò)程圖解
這篇文章主要介紹了JsonServer安裝及啟動(dòng)過(guò)程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02 
這篇文章主要介紹了 Scala解析Json字符串的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下
2017-10-10