javascript使用canvas實(shí)現(xiàn)餅狀圖效果
使用canvas寫一個(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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Ajax實(shí)現(xiàn)文件上傳功能(Spring MVC)2. 基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)3. idea設(shè)置代碼格式化的方法步驟4. 使用EF Code First搭建簡易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫遷移5. ASP開發(fā)準(zhǔn)則是什么6. vue動(dòng)態(tài)加載SVG文件并修改節(jié)點(diǎn)數(shù)據(jù)的操作代碼7. python 工具 字符串轉(zhuǎn)numpy浮點(diǎn)數(shù)組的實(shí)現(xiàn)8. Python 實(shí)現(xiàn)平臺(tái)類游戲添加跳躍功能9. Python多分支if語句的使用10. python 日志模塊logging的使用場景及示例
網(wǎng)公網(wǎng)安備