php虚线园的代码,canvas画虚线圆

本是古典何须时尚 2023-01-17 04:55 277阅读 0赞

本文要实现的图形

![bVFVJg?w=121&h=122][bVFVJg_w_121_h_122]

一个简单的占比统计。。

实现的方案是html js合成

首先是简单的HTML布局

statistics

.zh-chart \{

width: 100px;

height: 100px;

background: \#142838;

\}

然后通过js来实现我们的最终效果，相应的操作都有注释。

var chartEle = $('.zh-chart');

var canvas = document.createElement('canvas');

canvas.width = chartEle.width();

canvas.height = chartEle.height();

var radius = canvas.width/2;

chartEle.append(canvas);

var ctx = canvas.getContext('2d');

// 内圆

ctx.arc(radius, radius, radius\*2/3, 0, 2\*Math.PI);

ctx.fillStyle="rgba(22,196,203,0.1)";

ctx.fill();

ctx.strokeStyle = '\#16C4CB';

ctx.stroke();

// 虚线圆环

ctx.translate(radius, radius); // 改变旋转中心

ctx.beginPath();

ctx.arc(0, 0, radius\*2/3+4, 0, Math.PI/30);

ctx.strokeStyle = '\#16C4CB';

ctx.stroke();

ctx.closePath();

for(var i=0; i<40; i++) \{

ctx.beginPath();

ctx.rotate(10\*Math.PI/180);

ctx.arc(0, 0, radius\*2/3+4, 0, Math.PI/30);

ctx.strokeStyle = '\#16C4CB';

ctx.stroke();

ctx.closePath();

\}

// 外圆环

ctx.beginPath();

ctx.arc(0, 0, radius-4, 0, 2\*Math.PI);

ctx.strokeStyle = '\#16C4CB';

ctx.stroke();

ctx.closePath();

// 数据渲染

var data = \[

\{val: chartEle.data('b'), color: '\#AF4A6F'\},

\{val: chartEle.data('c'), color: '\#16C4CB'\},

\{val: chartEle.data('d'), color: '\#887BD0'\},

\{val: chartEle.data('e'), color: '\#19B478'\},

\{val: chartEle.data('f'), color: '\#DE725A'\}

\];

// ctx.rotate(100\*Math.PI/180);

for(var j=0; j<5; j++) \{

var rate = data\[j\].val.split('/');

ctx.beginPath();

ctx.rotate(72\*Math.PI/180);

ctx.arc(0, 0, radius-4, 0, (2\*Math.PI)/5\*(rate\[0\]/rate\[1\]));

ctx.strokeStyle = data\[j\].color;

ctx.lineWidth = 5;

ctx.stroke();

ctx.closePath();

\}

感觉关注~~~~ 啦啦啦

[bVFVJg_w_121_h_122]: https://segmentfault.com/img/bVFVJg?w=121&h=122

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 php虚线园的代码,canvas画虚线圆

本文要实现的图形 ![bVFVJg?w=121&h=122][bVFVJg_w_121_h_122] 一个简单的占比统计。。实现的方案是html js合成首先是简单

本是古典何须时尚/ 2023年01月17日 04:55/ 0 赞/ 278 阅读

相关 openlayers画虚线 (十四)

在openlayers中画虚线主要是通过设置Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现

我就是我/ 2022年12月24日 02:53/ 0 赞/ 783 阅读

相关超链接 a标签虚线框虚线去除虚线框

当一个链接得到焦点时，默认会有个虚线框。如图： ![链接虚线框][hide-link-outline.gif] 在 Firefox 里可以用 -moz-outline:no

短命女/ 2022年09月30日 03:54/ 0 赞/ 225 阅读

相关 Android画虚线攻略

一般我们在Android画虚线有两种方式 1.布局里面画虚线：在drawable里面创建一个dotted\_line\_view.xml文件，里面内容如下： <?x

àì夳堔傛蜴生んèń/ 2022年04月27日 19:04/ 0 赞/ 2162 阅读

相关 Canvas 画圆

原文地址：http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b \-----------------------

爱被打了一巴掌/ 2021年12月15日 11:55/ 0 赞/ 417 阅读

相关小程序canvas画虚线圆

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

约定不等于承诺〃/ 2021年12月11日 13:13/ 0 赞/ 432 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 640 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 517 阅读

相关 canvas画圆

画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所

雨点打透心脏的1/2处/ 2021年07月24日 16:22/ 0 赞/ 580 阅读

相关 canvas绘制虚线setLineDash

window.onload=function(){ ctx.beginPath(); ctx.setLineDash(

ゞ浴缸里的玫瑰/ 2021年07月24日 16:06/ 0 赞/ 564 阅读