canvas入门demo(小程序)

最新推荐文章于 2025-07-16 14:20:18 发布

原创最新推荐文章于 2025-07-16 14:20:18 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

canvas 同时被 2 个专栏收录

3 篇文章

订阅专栏

小程序

2 篇文章

订阅专栏

本文介绍如何利用Canvas API在Web页面上绘制动态饼图。通过具体实例代码展示了饼图的绘制过程，包括设置圆心、半径、计算各部分所占比例及绘制各个扇区，并实现了扇区百分比的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

熟悉canvas先熟悉文档可以去w3cschool,菜鸟教程去看canvas的一些简单介绍，使用方法。
实现效果：
实现代码：

var res = null;
var colors = ['red','yellow','blue','green'];//颜色
var total = 0;//声明数据总量
var arr = [78,54,68,85];//数据来源
var radius = 100;//定义半径
var point = {x:0, y:150};//定义圆心
var star = 0;//声明起点弧度
var stops = 0;
var starts = 0;
var ends = 0; 
const ctx = wx.createCanvasContext('mycanvas');//创建上下文
Page({

  /**
   * 页面的初始数据
   */
  data: {
    screen_width: 375,
    screen_height: 603
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    res = wx.getSystemInfoSync({//获取设备信息
      success: (res) =>{
        let screen_width = res.screenWidth;
        let screen_height = res.screenHeight;
        that.setData({ screen_width, screen_height })
      }
    })
    that.doit();
    that.numrun();
    ctx.draw(); 
  },
  doit: function(){
    
    point.x = res.screenWidth / 2;//圆心X坐标
    for(var i=0; i<arr.length; i++){ //计算总量
       total += arr[i];
    }
    for(var j=0; j<arr.length; j++){
      ctx.beginPath();//开启路径
      stops += arr[j] / total * 2 * Math.PI;//结束弧度
      //console.log(stops)
      //console.log(2 * Math.PI)
      ctx.arc(point.x, point.y, radius, star, stops, false);//绘制弧度，参数：圆心X坐标、圆心Y坐标、半径、开始位置、结束位置、是否是顺时针
      ctx.lineTo(point.x, point.y);//方法增加一个新点，然后创建一条从上次指定点到目标点的线。
      ctx.stroke();//连接的线条
      ctx.setFillStyle(colors[j]);//对应填充的颜色
      ctx.fill();//对当前路径中的内容进行填充。默认的填充色为黑色。
      ctx.closePath();//关闭当前路径
      star += arr[j] / total * 2 * Math.PI;//下一个区域的开始弧度点，当前需要弧度占总数的多少
    }
    // ctx.draw();//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
  },
  numrun: function() {
    point.x = res.screenWidth / 2;//圆心X坐标
    ctx.translate(point.x, point.y);//设置圆心
    for (var i = 0; i < arr.length; i++) { //计算总量
      total += arr[i];
    }
    for(var i=0;i<arr.length;i++){
      ctx.beginPath();//开启路径
      starts = arr[i] / total * Math.PI /0.5;
      var m = arr[i] / total * 100 ;
      ctx.rotate(ends + starts);//旋转数值  
      ctx.font = "15px scans-serif";
      ctx.fillStyle = "aqua";//设置字体颜色
      console.log(m)
      ctx.fillText(m.toFixed(2) + "%", 40, 10);//填充数字
      ends = arr[i] / total * Math.PI / 0.5;
      ctx.closePath();//关闭当前路径   
    } 
  }
})