zoukankan      html  css  js  c++  java
  • canvas画扇形图(本文来自于http://jo2.org/html5-canvas-sector/)

    1.定义画扇形的构造函数:

    //扇形
    CanvasRenderingContext2D.prototype.sector function (x, y, radius, sDeg, eDeg{
    // 初始保存
    this.save();
    // 位移到目标点
    this.translate(x, y);
    this.beginPath();
    // 画出圆弧
    this.arc(0,0,radius,sDeg, eDeg);
    // 再次保存以备旋转
    this.save();
    // 旋转至起始角度
    this.rotate(eDeg);
    // 移动到终点,准备连接终点与圆心
    this.moveTo(radius,0);
    // 连接到圆心
    this.lineTo(0,0);
    // 还原
    this.restore();
    // 旋转至起点角度
    this.rotate(sDeg);
    // 从圆心连接到起点
    this.lineTo(radius,0);
    this.closePath();
    // 还原到最初保存的状态
    this.restore();
    return this;
    }

    //开始画扇形

    var ctx = document.getElementById('cvs').getContext('2d');
    ctx.sector(100,100,50,0,Math.PI/180*230).fill();

    //比例扇形

    var deg = Math.PI/180;
    ctx.sector(100,100,80,30*deg,111*deg).fill();
    ctx.fillStyle="#f00";
    ctx.sector(100,100,80,111*deg,190*deg).fill();
    ctx.fillStyle="#0f0";
    ctx.sector(100,100,80,190*deg,233*deg).fill();
    ctx.fillStyle="#00f";
    ctx.sector(100,100,80,233*deg,280*deg).fill();
    ctx.fillStyle="#789";
    ctx.sector(100,100,80,280*deg,345*deg).fill();
    ctx.fillStyle="#abcdef";
    ctx.sector(100,100,80,345*deg,30*deg).fill();

  • 相关阅读:
    webpack devServer配置项的坑
    app混合开发 fastlick.js 在ios上 input标签点击 不灵敏 处理
    vue 学习八 自定义指令
    Verilog数值大小比较
    Verilog实现Matlab的fliplr函数
    基本不等式
    如何读取ila数据
    Xilinx FPGA时钟IP核注意事项
    FPGA Turbo译码器注意事项
    EbN0转SNR
  • 原文地址:https://www.cnblogs.com/dangou/p/5880590.html
Copyright © 2011-2022 走看看