微信小程序-封装了一个画饼的函数
2016-11-30 10:00
429 查看
Page( {
onReady: function() {
var id="canvas";
var array = [ 15, 22, 1.57,26 ];
var colors = [ "#ff0000", "#ffff00", "#0000ff", "#00ff00" ];
//参数分别为:画布id,数值数组,颜色数组,圆心X,圆心Y,半径
this.canvasDrawPie(id,array,colors,50,50,50);
} ,
canvasDrawPie(id,array,colors,x,y,radius){
// 页面渲染完成
//使用wx.createContext获取绘图上下文context
var context = wx.createContext();
// 画饼图
// 数据源
var total = 0;
// 计算总量
for( var index = 0;index < array.length;index++ ) {
total += array[ index ];
}
// 定义圆心坐标
var point = { x: x, y: y };
/* 循环遍历所有的pie */
for( var i = 0;i < array.length;i++ ) {
context.beginPath();
// 起点弧度
var start = 0;
if( i > 0 ) {
// 计算开始弧度是前几项的总和,即从之前的基础的上继续作画
for( var j = 0;j < i;j++ ) {
start += array[ j ] / total * 2 * Math.PI;
}
}
console.log( "i:" + i );
console.log( "start:" + start );
// 1.先做第一个pie
// 2.画一条弧,并填充成三角饼pie,前2个参数确定圆心,第3参数为半径,第4参数起始旋转弧度数,第5参数本次扫过的弧度数,第6个参数为时针方向-false为顺时针
context.arc( point.x, point.y, radius, start, array[ i ] / total * 2 * Math.PI, false );
// 3.连线回圆心
context.lineTo( point.x, point.y );
// 4.填充样式
context.setFillStyle( colors[ i ] );
// 5.填充动作
context.fill();
context.closePath();
}
//调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为
wx.drawCanvas( {
//指定canvasId,canvas 组件的唯一标识符
canvasId: id,
actions: context.getActions()
});
}
})
引用了:http://blog.csdn.net/qq_31383345/article/details/52944685#
onReady: function() {
var id="canvas";
var array = [ 15, 22, 1.57,26 ];
var colors = [ "#ff0000", "#ffff00", "#0000ff", "#00ff00" ];
//参数分别为:画布id,数值数组,颜色数组,圆心X,圆心Y,半径
this.canvasDrawPie(id,array,colors,50,50,50);
} ,
canvasDrawPie(id,array,colors,x,y,radius){
// 页面渲染完成
//使用wx.createContext获取绘图上下文context
var context = wx.createContext();
// 画饼图
// 数据源
var total = 0;
// 计算总量
for( var index = 0;index < array.length;index++ ) {
total += array[ index ];
}
// 定义圆心坐标
var point = { x: x, y: y };
/* 循环遍历所有的pie */
for( var i = 0;i < array.length;i++ ) {
context.beginPath();
// 起点弧度
var start = 0;
if( i > 0 ) {
// 计算开始弧度是前几项的总和,即从之前的基础的上继续作画
for( var j = 0;j < i;j++ ) {
start += array[ j ] / total * 2 * Math.PI;
}
}
console.log( "i:" + i );
console.log( "start:" + start );
// 1.先做第一个pie
// 2.画一条弧,并填充成三角饼pie,前2个参数确定圆心,第3参数为半径,第4参数起始旋转弧度数,第5参数本次扫过的弧度数,第6个参数为时针方向-false为顺时针
context.arc( point.x, point.y, radius, start, array[ i ] / total * 2 * Math.PI, false );
// 3.连线回圆心
context.lineTo( point.x, point.y );
// 4.填充样式
context.setFillStyle( colors[ i ] );
// 5.填充动作
context.fill();
context.closePath();
}
//调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为
wx.drawCanvas( {
//指定canvasId,canvas 组件的唯一标识符
canvasId: id,
actions: context.getActions()
});
}
})
引用了:http://blog.csdn.net/qq_31383345/article/details/52944685#
相关文章推荐
- 微信小程序之封装请求函数
- 微信小程序 之 请求函数封装
- 微信小程序对wx.request函数进行封装操作的代码示例
- 在linux程序里面,知道一个函数地址,改函数是属于某个动态库的,怎么样得到这个动态库的全路径名(转)
- 看了网上的大多防SQL攻击程序,自己编写了一个函数,比较完美。大家一起测测~
- ABAP--一个不错的函数模块的文档生成程序
- 一个封装好的XMLHttp对象的创建函数
- 一个C++程序例子——指向函数的指针、含有可变形参的函数(备查)
- 关于函数中传递地址值和结构体的一个小程序
- 调试使用了函数模块的程序时需要注意的一个小问题
- 调试使用了函数模块的程序时需要注意的一个小问题
- 整合了一个PHP分页函数与smarty与程序显示的例子
- 一个简单封装用户命令的C++程序
- 转载一个比较有意思的程序函数,呵! result love(boy, girl)
- Windows API 函数学习(11)---一个关机程序的源代码
- 一个简单封装用户命令的C++程序
- 画函数图形的C#程序,兼论一个病态函数
- ABAP--一个不错的函数模块的文档生成程序
- 一个在vbscript中读取cookie的程序函数
- 谁能跟我编写一个程序(C语言)题目是编写一个函数计算sum(n)=1+2+3+。。。+n(n&gt;=1)