绘制效果
实现代码
JavaScript
var canvas = document.getElementById("mycanvas"); var w = window.innerWidth; var h = window.innerHeight; canvas.height = 1000; canvas.width = 1400; var ctx = canvas.getContext('2d'); var poppable = true; var slices = []; function shadeColor(color, percent) { var f = parseInt(color.slice(1), 16), t = percent < 0 "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1); } function pieSlice(oX, oY, r, pos, len, col,data) { this.data = data this.originX = oX; this.originY = oY; this.radius = r; this.startingRadian = pos; this.length = len; this.color = col; this.highlightedColor = shadeColor(this.color, .6); this.highlighted = false; this.popped = false; this.animationFrame = 0; function setColor(c) { this.color = c; } } pieSlice.prototype.displayData = function(){ ctx.fillStyle= this.color; ctx.fillRect(this.originX - this.radius - 40, this.originY-this.radius-35, 25,25); ctx.fillStyle= "white"; ctx.font = "15px Arial"; ctx.fillText(this.data, this.originX - this.radius - 10, this.originY - this.radius - 18); } pieSlice.prototype.render = function() { if (!this.highlighted) { ctx.fillStyle = this.color; ctx.strokeStyle = this.color; } else { if(!this.popped && poppable){ this.displayData(); } // ctx.fillStyle = this.color; ctx.fillStyle = this.highlightedColor; ctx.strokeStyle = this.color; } ctx.beginPath(); var xOffset = Math.cos(this.length / 2 + this.startingRadian) * this.animationFrame; var yOffset = Math.sin(this.length / 2 + this.startingRadian) * this.animationFrame; ctx.moveTo(this.originX + xOffset, this.originY + yOffset); var x = this.originX + xOffset + this.radius * Math.cos(this.startingRadian); var y = this.originY + yOffset + this.radius * Math.sin(this.startingRadian); ctx.lineTo(x, y); ctx.arc(this.originX + xOffset, this.originY + yOffset, this.radius, this.startingRadian, this.startingRadian + this.length); if (this.popped) { var fill = ctx.fillStyle; this.displayData(); ctx.fillStyle = fill; if (this.animationFrame < 30) { this.animationFrame += 2; } } else { if (this.animationFrame > 0) { this.animationFrame -= 2; } } ctx.closePath(); //ctx.stroke(); //if (this.highlighted) { ctx.fill(); // } } pieSlice.prototype.update = function() { } function pieChart(s) { this.slices = s; } pieChart.prototype.render = function() { this.slices.forEach(function(p) { p.render(); }); }; pieChart.prototype.update = function() { this.slices.forEach(function(p) { p.update(); }); } //PIE ONE var pie = new pieSlice(700, 170, 125, 0, Math.PI / 4, "#FFD1DC", 12); var slice2 = new pieSlice(700, 170, 125, Math.PI / 4, Math.PI / 4, "#08E8DE"); var slice3 = new pieSlice(700, 170, 125, Math.PI / 2, Math.PI / 4, "#6699CC"); var slice4 = new pieSlice(700, 170, 125, 3 * Math.PI / 4, Math.PI, "#ADD8E6"); var slice5 = new pieSlice(700, 170, 125, 7 * Math.PI / 4, Math.PI / 4, "#B19CD9"); var slices1 = [pie, slice2, slice3, slice4, slice5]; var pink = new pieSlice(220, 170, 125, 0, Math.PI / 3, "#FF4B4B"); var orange = new pieSlice(220, 170, 125, Math.PI / 3, Math.PI / 3, "#FF931B"); var yellow = new pieSlice(220, 170, 125, 2 * Math.PI / 3, Math.PI / 3, "#FFE21B"); var green = new pieSlice(220, 170, 125, 3 * Math.PI / 3, Math.PI / 3, "#90E64E"); var blue = new pieSlice(220, 170, 125, 4 * Math.PI / 3, Math.PI / 3, "#6097D9"); var purple = new pieSlice(220, 170, 125, 5 * Math.PI / 3, Math.PI / 3, "#8365DD"); var redd = new pieSlice(1180, 170, 125, 0, 2 * Math.PI / 3, "#B3989B"); var orangee = new pieSlice(1180, 170, 125, 2 * Math.PI / 3, 1 * Math.PI / 8, "#C1AEE0"); var bluee = new pieSlice(1180, 170, 125, 19 * Math.PI / 24, 4 * Math.PI / 24, "#928CE9"); var greenn = new pieSlice(1180, 170, 125, 23 * Math.PI/24, 3* Math.PI/8, "#676675"); var purplee = new pieSlice(1180, 170, 125, 4 * Math.PI/3, 3* Math.PI/8, "#947D59"); var ceci = new pieSlice(1180, 170, 125, 41 * Math.PI/24, 7*Math.PI/24, "#D994E0"); var slices3 = [redd, orangee, bluee, greenn, purplee, ceci]; var slices2 = [pink, orange, yellow, green, blue, purple]; var pie1 = new pieChart(slices1); var pie2 = new pieChart(slices2); var pie3 = new pieChart(slices3); var update = function() { pie1.update(); } var render = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); pie1.render(); pie2.render(); pie3.render(); } var step = function() { update(); render(); animate(step); } var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; slices.push.apply(slices, slices1); slices.push.apply(slices, slices2); slices.push.apply(slices, slices3); canvas.addEventListener("mousemove", function(e) { var x = e.clientX; var y = e.clientY; slices.forEach(function(slice) { ctx.beginPath(); var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame; var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame; ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset); var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian); var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian); ctx.lineTo(xx, yy); ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length); if (ctx.isPointInPath(x, y)) { slice.highlighted = true; slice.displayData(); } else { slice.highlighted = false; } ctx.closePath(); }); }); canvas.addEventListener("click", function(e) { var x = e.clientX; var y = e.clientY; slices.forEach(function(slice) { ctx.beginPath(); var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame; var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame; ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset); var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian); var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian); ctx.lineTo(xx, yy); ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length); if (ctx.isPointInPath(x, y)) { if (slice.popped) { slice.popped = false; poppable = true; } else { if(poppable){ slice.popped = true; poppable = false; } } slice.highlighted = false; } ctx.closePath(); }); }); //start the loop animate(step);
html
<canvas id="mycanvas"></canvas>
以上就是JavaScript 绘制饼图的示例的详细内容,更多关于JavaScript 绘制饼图的资料请关注其它相关文章!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript 绘制饼图的示例”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]