基于Konva的canvas动态绘图(2)

共3个文件

js：2个

html：1个

Konva

canvas

需积分: 50 10 下载量 142 浏览量 2016-09-23 18:53:26 上传评论收藏 33KB 7Z 举报

温馨提示

基于Konva的canvas动态绘图，用到了面向对象的思想,实现了一个在网页加载时，扇形圆动态开启的动画下效果

资源推荐

资源详情

资源评论

收起资源包目录

基于Konva的canvas绘图(2).7z （3个子文件）

08饼状图-面向对象版本.html 1KB

konva.min.js 131KB

PieChart.js 3KB

共 3 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>08-饼状图面向对象版本</title> <style> body { padding: 0; margin: 0; background-color: #f0f0f0; overflow: hidden; } </style> <script src="bower_components/konva/konva.min.js"></script> <script src="js/PieChart.js"></script> </head> <body> <div id="container"> </div> <script> //创建舞台 var stage = new Konva.Stage({ container: 'container', width: window.innerWidth,//全屏 height: window.innerHeight }); //创建层 var layer = new Konva.Layer(); stage.add(layer); //中心点坐标 var cenX = stage.width() / 2; var cenY = stage.height() / 2; var data = [ { name: "前端", value: .25, color: '#e0e' }, { name: "php", value: .2, color: 'orange'}, { name: "UI", value: .3, color: 'blue' }, { name: "C++", value: .05, color: 'green' }, { name: "游戏", value: .1, color: 'purple'}, { name: "Java", value: .1, color: 'red' } ]; var p = new PieChart({ x: cenX, y: cenY, r: 100, data: data }); p.addToGroupOrLayer( layer ); layer.draw(); p.playAnimate(); </script> </body> </html>

评论收藏

内容反馈

资源评论