使用canvas编写环形图.

原理使用canvas画图:

第一步:画一个大圆

第二部:画一个扇形

第三部:画一个小圆

相互叠加.

最终效果:

现在上代码:

(function($){
    $.fn.drawPic=function(opts){
        var defaults={
            canvasbj:"white",//画布背景
            canvasWidth:50,
            canvasHeight:50,
            bigBg:"red",//大圆背景
            bigRadius:50,//大圆半径
            ringColor:"yellow",//环形颜色
            smallBg:"white",//小圆背景
            smallRadius:30,//小圆半径
            deg:0.25,//百分比,90度
            text:"90/360",
            textColor:"black",
            textFont:"normal 14px 微软雅黑"
        };
        function draw(id,opt){
            var canvas=document.getElementById(id);
            if(canvas==null){
                return false;
            }
            var ctx=canvas.getContext(‘2d‘);

            //填充画布
            ctx.fillStyle=opt.canvasbj;
            ctx.fillRect(0,0,opts.canvasWidth,opts.canvasHeight);

            ctx.beginPath();
            //重置画布起点
            ctx.translate(opts.canvasWidth/2, opts.canvasHeight/2);
            //转到新起点
            ctx.moveTo(0,0);
            //画大圆
            ctx.arc(0,0,opts.bigRadius,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fillStyle=opts.bigBg;
            ctx.fill();

            //开始绘制扇形
            ctx.beginPath();
            ctx.moveTo(0, 0);
            // 绘制圆弧
            ctx.arc(0, 0, opts.bigRadius, 0, -1*opts.deg*360*Math.PI/180,true);
            // 闭合路径
            ctx.closePath();
            ctx.fillStyle=opts.ringColor;
            ctx.fill();

            //绘制小圆
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.arc(0,0,opts.smallRadius,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fillStyle=opts.smallBg;
            ctx.fill();

            //绘制文字
            ctx.moveTo(0,0);//移动笔触到原点
            ctx.fillStyle=opts.textColor;//文本颜色
            ctx.font=opts.textFont;//文本
            ctx.textAlign="center";//相对原点水平居中
            ctx.textBaseline="middle";//相对原点垂直居中
            ctx.fillText(opts.text,0,0);//开始写字
        }
        opts=$.extend({},defaults,opts);
        this.each(function(){
            var obj=$(this);
            var currentCanvas="canvas"+(new Date()).getTime();
            obj.html("<canvas id=‘"+currentCanvas+"‘ width=‘"+opts.canvasWidth+"‘ height=‘"+opts.canvasHeight+"‘>您的设备不支持!</canvas>");
            draw(currentCanvas,opts);
        });
    }
})(jQuery);

Html代码以及调用:

  <div class="pie1"></div>
    <script type="text/javascript">
        $(".pie1").drawPic({
            canvasbj:"#ccc",//画布背景
            canvasWidth:400,
            canvasHeight:300,
            bigBg:"red",//大圆背景
            bigRadius:80,//大圆半径
            ringColor:"yellow",//环形颜色
            smallBg:"white",//小圆背景
            smallRadius:65,//小圆半径
            deg:0.25,//百分比
            text:"90/360",
            textColor:"black",
            textFont:"normal 30px 微软雅黑"
        });
    </script>
时间: 2024-10-15 22:27:09

使用canvas编写环形图.的相关文章

echarts白色实心环形图(空心饼图)的编写

// 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取容器宽度let myHeight = myDom.offsetHeight - 5; // 获取容器高度let myRadius = myHeight * 0.44 / 2; // 根据环形图内圈百分比获取内圆半径let myPX = (0.3 - (myRadius / myWidth)) * 1

环形图 自定义(一)

需求:自定义环形图(饼图),实现2项数据配比显示; 效果图: 实现分析: 1.目录结构: 代码实现: 1. color.xml <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 饼图 --> <color name="pie_progress_bank">#fd8f8b</color> <color name="

Sliverlight实例之 绘制扇形和环形图

原文:Sliverlight实例之 绘制扇形和环形图 未解决: 1,任意偏角,是个重点问题: (1),  另一边在弧上坐标 (2),  这个弧的弧度(ArcSegment中的Size或Angle属性) (3),  如何把这个弧度做成依赖属性配置的 2,做成一个自定义控件 有时间,再完成 准备知识: 1,  平面几何思维(三角形,圆,弧,曲线,斜率,方程式) 2,  三次贝塞尔曲线的数学公式 3,  定时器与动画的区别是时间序列 4,  缓动动画   一,1道几何题 已知两点坐标确定一条直线,直线

写总结写报告 环形图的制作与应用

人一直追求完美,什么是美,文字的表现力不如语言,但是文图结合就不一样了,我想谁也不喜欢看着枯燥的文字,尤其是报告中,数字多了更让人觉得反感,作报告的时候PPT展示的时候,总不能就写个标题,或者全部都是一页页的文字吧,数据不仅仅是靠数字表现,因此伟大的人类发明了柱状图,圆饼图,折线图,环状图等等. 这样就可以一眼准确的看出系列总数和比例,这就又涉及到了一个词,"比例",比例如果只单调的罗列数据,当我们看到数字的时候并不会有什么感觉,或大或小,就好比我们花钱,为什么花人民币的时候心疼,而刷

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1

用h5中的canvas 绘制八卦图

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制八卦图</title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="600" height="500"><

iOS 画环形图

由于新项目的的需求,需要画环形图,由于以前都没接触过这一类(我是菜鸟),去cocochina山找到了一个案例,个人觉得还可以,分享一下 github 地址https://github.com/zhouxing5311/ZZCircleProgress 这个使用起来非常的简单 作者开放了很多接口,可以根据自己的需求进行更改 一般就是声明一个累类就Ok了 具体实现的代码如下 可能我的代码有点不一样,我自己加入了一些元素进去 //无小圆点.同动画时间 self.zzCircleProgress = [

Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图.先看看绘制的效果: 代码: public class MyView extends View { //坐标轴原点的位置 private int xPoint=60; private int yPoint=260; //刻度长度 private int xScale=8;  //8个单位构

Android自定义组件系列【9】——Canvas绘制折线图

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图.先看看绘制的效果: 实现原理很简单,我就直接给出代码: package com.example.testcanvasdraw; import java.util.ArrayList; import java.util.List; import java.util.Random; impo