h5 canvas手工写一个初级的饼状图,只为研究原理,自娱自乐

最新推荐文章于 2024-07-07 15:37:01 发布
最新推荐文章于 2024-07-07 15:37:01 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： js Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013067420/article/details/77988503
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="pie" width="800px" height="600px" style="border: 1px solid #999999;margin: 0px;padding: 0;">
    (Your browser doesn't support canvas)
</canvas>
<script type="text/javascript">

    DomUtils = {
        addEventListener:function(obj,type,fn,context){
            function handler(e){
                return fn.call(context||obj,e);
            }
            if(obj.addEventListener){
                obj.addEventListener(type,handler,false);
            }
            else if(obj.attachEvent){
                obj.attachEvent("on"+type,handler);
            }
        },
        removeEventListener:function(){
            if(obj.addEventListener){
                obj.removeEventListener(type,fn,false);
            }
            else if(obj.attachEvent){
                obj.detachEvent("on"+type,handler);
            }
        }
    }

    var PieChart = function(){
        // func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
        this.init.apply(this,arguments);
    };
    PieChart.prototype = {
        init:function(id,options){
            this.renderId = id;
            this.canvas = document.getElementById(this.renderId);
            this.data = options.data;
            this.colors = options.colors;
            this.labels = options.labels;
            this.linecolor = options.linecolor||"rgba(229, 205, 205, 0.58)";
            this.isCircle = options.isCircle;
            this.radius = options.radius||[];
            this.angles = [];
            this.prompt = null;
            this.center = {x:0,y:0,radius:50};
            this.offset = options.offset||100;
            this.legend = {
                width:20,
                height:10
            };
            this._calcAngle();
        },
        _calcAngle(){
            var startAngle = 0;
            var endAngle = 0;
            for(var i=0;i<this.data.length;i++){
                endAngle = startAngle+Number(this.data[i])*Math.PI*2;
                this.angles.push({
                    index:i,
                    label:this.labels[i],
                    color:this.colors[i],
                    start:startAngle,
                    end:endAngle
                });
                startAngle = endAngle;
            }
        },
        _draw:function(){
            // 开始绘画
            var width = this.canvas.width;
            var height = this.canvas.height;
            var radius = Math.min(width,height)/2-this.offset;
            var x = radius+this.offset;
            var y = height/2+this.canvas.offsetTop-8;
            this.center.x = x;
            this.center.y = y;
            this.center.radius = radius;
            var ctx = this.canvas.getContext("2d");
            this._antialiasing(ctx,width,height);
            ctx.strokeStyle = this.linecolor;
            for(var i=0;i<this.angles.length;i++){
                ctx.beginPath();
                ctx.moveTo(x,y);
                ctx.fillStyle=this.angles[i].color;
                ctx.arc(x,y,radius,this.angles[i].start,this.angles[i].end);
                ctx.closePath();
                ctx.lineWidth=1;
                //ctx.strokeStyle="#ffffff";
                ctx.fill();
                ctx.stroke();
            }
            this._drawCircle(ctx);
        },
        _antialiasing:function(ctx,width,height){
            if (window.devicePixelRatio) {
                this.canvas.style.width = width + "px";
                this.canvas.style.height = height + "px";
                this.canvas.height = height * window.devicePixelRatio;
                this.canvas.width = width * window.devicePixelRatio;
                ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
            }
        },
        _drawCircle:function(ctx){
            if(this.isCircle){
                ctx.beginPath();
                ctx.moveTo(this.center.x,this.center.y);
                ctx.fillStyle="#ffffff";
                ctx.arc(this.center.x,this.center.y,this.center.radius/3,0,Math.PI*2);
                ctx.closePath();
                ctx.fill();
            }
        },
        _drawLegend:function(){
            var ctx = this.canvas.getContext("2d");
            var x = this.canvas.offsetWidth-150;
            var y = this.offset;
            for(var i=0;i<this.angles.length;i++){
                ctx.beginPath();
                ctx.moveTo(x,y);
                ctx.fillStyle=this.angles[i].color;
                ctx.fillRect(x,y,this.legend.width,this.legend.height);
                // 绘制文字
                ctx.moveTo(x+this.legend.width+5, y+this.offset/2);
                ctx.font = 'bold 12px 微软雅黑';
                ctx.fillStyle = color_arr[i];
                ctx.fillText(this.angles[i].label,x+this.legend.width+5,y+this.offset/2)
                //ctx.closePath();
                //ctx.strokeStyle="#ffffff";
                ctx.fill();
                y = y + 20;
            }
        },
        _drawPrompt(x,y,index){
            var pie = this.angles[index];
            var d = this.data[index];
            if(!this.prompt){
                this.prompt = document.createElement("div");
                document.body.appendChild(this.prompt);
            }
            this.prompt.style.display = "block";
            this.prompt.style.background = "rgba(50, 50, 50, 0.701961)";
            this.prompt.style.position = "absolute";
            this.prompt.style.padding = "5px";
            this.prompt.style.zindex = "99999";
            this.prompt.style.color = "#fff";
            this.prompt.style.borderRadius = "4px";
            this.prompt.style.top = y+20+"px";
            this.prompt.style.left = x+20+"px";
            this.prompt.innerHTML = pie.label+"<br/>"+d;
        },
        _getPieIndex:function(x,y){
            var angle = Math.atan2(y,x);
            if (angle < 0) angle = -angle;
            else {
                angle = Math.PI * 2 - angle;
            }
            for(var i=0;i<this.angles.length;i++){
                if(angle<=this.angles[i].end){
                    return i;
                }
            }
        },
        _onMouseOver:function(){
            this._draw();
            var e = arguments.callee.caller.arguments[0]||event;
            var x = e.x|| e.clientX;
            var y = e.y|| e.clientY;
            var dx = x-this.center.x;
            var dy = this.center.y-y;
            var d = Math.sqrt(dx*dx+dy*dy);
            if(this.center.radius>=d){
                console.info(x+","+y);
                var index = this._getPieIndex(dx,dy);
                var ctx = this.canvas.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(this.center.x,this.center.y);
                ctx.fillStyle=this.angles[index].color;
                ctx.lineWidth=1;
                ctx.arc(this.center.x,this.center.y,this.center.radius+20,this.angles[index].start,this.angles[index].end);
                ctx.closePath();
                ctx.fill();
                this._drawCircle(ctx);
                this._drawPrompt(x,y,index);
            }else{
                if(this.prompt)this.prompt.style.display="none";
            }
        },
        _dispatchEvent:function(){
            DomUtils.addEventListener(this.canvas,'mouseover',this._onMouseOver,this);
            //DomUtils.addEventListener(this.canvas,'mouseout',canvasOnMouseOut,this);
            DomUtils.addEventListener(this.canvas,'mousemove',this._onMouseOver,this);
        },
        render:function(){
            this._draw();
            this._dispatchEvent();
            this._drawLegend();
        }
    };

    var data_arr = [0.05, 0.25, 0.6, 0.1];
    var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#0044ff"];
    var text_arr = ["河北", "山东", "河南", "山西"];

    var piechart = new PieChart("pie",{
        isCircle:true,
        data:data_arr,
        colors:color_arr,
        labels:text_arr
    });
    piechart.render();

</script>
</body>
</html>
空聆者
关注
专栏目录
用原生js手写 canvas饼状图
Jacky的博客
01-08 4772
一、canvas是什么？     百度的定义：Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。百度上的定义基本描述的什么是canvas，然而要补充的一点是，canvas现在只能支持2d渲染，它最早是由苹果在webkit的浏览器使用到canvas，由于实用性，逐渐被各个浏览器所支持，二、canvas本...
html动画转换为gif,h5使用canvas输出为gif动画图片
weixin_39999222的博客
05-30 1871
使用h5的canvas提供的接口很容易实现一些动画,如果能把这些动画实现成gif动图就更好啦，还真有大神实现啦这个功能下面说明使用方法开源库地址首先引入需要的js文件gif.js在页面里自己创建一个canvas并且在它上面画一些动画js附件在后面下载然后就是gif的使用方法啦vargif=newGIF({workers:2,quality:10});//添加一个图片标签对象像素到当前...
HTML5 Canvas饼状图表
08-19
HTML5 Canvas饼状图表,HTML5&jQuery图表应用
H5canvas--饼图
Yi_xuan_sky的博客
08-16 737
效果图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ca
2024年甘肃省职业院校技能大赛高职组“大数据应用开发”赛题③
最新发布
旺仔Sec&blog
07-07 1183
大数据时代背景下，电商经营模式发生很大改变。在传统运营模式中，缺乏数据积累，人们在做出一些决策行为过程中，更多是凭借个人经验和直觉，发展路径比较自我封闭。而大数据时代，为人们提供一种全新的思路，通过大量的数据分析得出的结果将更加现实和准确。商家可以对客户的消费行为信息数据进行收集和整理，比如消费者购买产品的花费、选择产品的渠道、偏好产品的类型、产品回购周期、购买产品的目的、消费者家庭背景、工作和生活环境、个人消费观和价值观等。通过数据追踪，知道顾客从哪儿来，是看了某网站投放的广告还是通过朋友推荐链接，是新访
基于HTML5 Canvas的饼状图表实现教程
weixin_30437481的博客
08-19 135
昨天我们分享了一款基于HTML5的线性图表应用，效果非常不错，可以看在线DEMO或者实现教程。今天我们继续来分享一款基于HTML5的网页图表，它也是利用Canvas绘制的，但是和前面不同的是，这款图表是饼状图，并且我们可以点击右侧的表格来选中激活当前的图表数据，具体效果可以看DEMO演示。 你也可以在这里查看在线演示 下面是实现的过程及源码，一起分享给大家。 HTML代码： &lt...
H5制作饼状图
hzp666的博客
06-30 4451
HTML5与CSS3严格意义上不具备编程语言的思想，所以还要借助JS去“画”它。 html代码 JS代码 var color = ["#999999","#333333","#336799"]; var data = [25,35,50]; function drawCircle(){ var canvas = document.getElementById("bingtu");
使用H5的canvas绘制饼状图
weixin_44823731的博客
05-12 910
前言：在我们写网站，我们往往都想要向用户展示一些数据，比如访问数，文章的点击数等等。如果我们只是用数字来向用户展示的，用户很可能会感觉到枯燥，因为数据的显示实在使太单一的。所以今天我来教大家来用H5的画布api来绘制饼状图，让你的网站更加高大上。 直接进入正题，先展示成果和源码。 最终结果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
vue h5移动端使用canvas实现手写签名并生成png图片，支持修改画笔颜色和画笔粗细，画布颜色及宽高（附完整代码）
Qiang1455155765的博客
08-20 2510
vue h5移动端使用canvas实现手写签名并生成png图片，支持修改画笔颜色和画笔粗细，画布颜色及宽高（附完整代码）
使用h5的canvas实现两张图片的合并
热门推荐
babulongbo的博客
12-18 2万+
思路： 1.首先等待图片加载完成 2.然后使用canvas完成图片的合并 3.显示合成图片 步骤： 1.根据第一个思路，需要image的load和error事件,大致流程： var l_image = new Image(); l_image.src = src; l_image.onload = function () {}； l_image.onerror = function
Android中Canvas绘图基础详解
11-11
该代码是一个完整的Android工程，详细演示如了如何使用Android中的各种drawXXX方法，以及画笔Paint如何影响绘制的效果。 具体参见博文： http://blog.csdn.net/iispring/article/details/49770651
html5 canvas画饼状图
07-08
通过自定义类，可以实现页面内任意多个饼图 自定义饼图各块的颜色，任意多 在firefox 22,chrome 浏览器测试通过
HTML5 canvas简单饼状图动画.zip
07-04
HTML5 canvas简单饼状图动画，动态饼状图效果。
HTML中的3D饼状图
06-20
虽说echarts已经提供了比较全面的图表，但是涉及到的类库很多，资源很多。一不小心就容易弄错。这款饼状图插件很轻量，适合做个性化裁剪。
HTML5绘制饼图演示index.html
11-05
HTML5绘制饼图演示，HTML5绘制饼图演示源码可以直接使用，不需要重新编制
HTML5绘制饼图实例（二）
03-26
NULL 博文链接：https://sarin.iteye.com/blog/1149851
html5制作饼图
赵峰的专栏
12-17 7176
本文章将通过一个简单易懂的实例来想大家阐述如何利用html5的canvas来绘制一个跟随json数据的饼状图，稍作移植，它就可以作为一个轻量级的js饼状图框架。下面让我们来看看示例运行效果。。。
饼状图
baidu_38766543的博客
09-10 149
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas width=&
uni-app 用于开发H5项目展示饼图，使用ucharts 饼图示例
LlanyW的专栏
12-18 2117
下载之后将对应的文件拷贝到自己的项目对应目录。
Android canvas饼状图绘制：自动适配条目与大小
要绘制饼状图，我们通常会创建一个自定义的View，继承自View类，然后重写`onDraw()`方法，在这个方法里利用Canvas进行绘制。 在这个示例中，创建了一个名为PieChartView的自定义View。开发者可以通过XML布局文件将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值