带你进入绚丽多彩的柿饼M（四）

原创

__Shirley 2021-08-11 11:42:25 ©著作权

文章标签 饼图二维码微信数据物联网 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者__Shirley的原创作品，请联系作者获取转载授权，否则将追究法律责任

柿饼M之画布

本篇文章将向大家介绍如何在屏上实现自定义的绘画。

首先，要进行绘图必然得有一个绘图的目标区域，在PersimM中，可以在页面上单独提供一块画布，在这个画布上就可以进行绘图操作了。即在设计器上，在一个Page中添加一个Canvas对象，背景色设置为白色，字体选择hz 16

带你进入绚丽多彩的柿饼M（四）_物联网

基于脚本的画布

在设计器中我们把"Canvas1"画布对象拖放出来，会发现它的区域默认是没有其他额外的显示。要对画布对象操作，我们必须使用脚本的方式，我们在脚本中可以通过以下的方式返回这个名字为"Canvas1"的画布对象：

var context = pm.createCanvas("Canvas1", this);

一般的画布操作

饼图

在这一小节中，我们将介绍如何在画布上绘制一个饼图：

var data = [ 20, 30, 40, 50, 60, 70 ];
  //饼图数据

var colors = [ "#ff0000", "#ffff00", "#ff00ff", "#00ff00", "#00ffff", "#0000ff"];
  //饼图颜色

var context = pm.createCanvasContext('Canvas1', this)
  //获取画布对象
if (context)
{    
   var total = 0;
   //饼图数据总和

    for( var index = 0; index < data.length; index++ )
    {
        total += data[ index ];
    }    
    var point = { x: 200, y: 200 };
   //圆心坐标，相对于画布
    var radius = 150;
                       //半径
    var start = -0.5 * Math.PI;
                       //起始弧度

    for( var i = 0; i < data.length; i++ )
    {
    var stop = start + data[ i ] / total * 2 * Math.PI;
                       //结束弧度

        context.beginPath();
                       //开始新的路径

        context.arc( point.x, point.y, radius, start, stop, false);
                       //画一段圆弧

        context.lineTo( point.x, point.y );
                       //连接圆弧终点和圆心
        context.setFillStyle( colors[ i ] );
                                                       
                      //设置填充颜色
        context.fill();
                     //填充路径

        context.closePath();
                    //关闭路径
        start = stop;
                   //起始弧度更新
    }

    context.draw();     
                  //更新画布

}

直接放到板子上，看看运行的效果，运行效果如下：

带你进入绚丽多彩的柿饼M（四）_数据_02