用Canvas画占百分比的圆形比例

先看一下效果图：

开发流程及主要思想

第一步：先画一个背景

第二步：占比例的圆的是从圆的正上方开始的画的，而默认情况下画的圆是从圆心的右边开始画的，所以要将圆旋转设置-90度，也就是 -Math.PI/2

默认情况下画出来的圆

设置ratate后的效果

context.rotate(-startArc);

第三步：效果图的开始点和结束点是圆形的，所以要画占比例的圆的开始点和结束点

开始点的圆:

在比例圆形上，以开始圆的左边为起点开始。所以画圆的圆心的坐标Y是开始圆的半径

  context.arc(83, 2, 2, 0, (Math.PI * 2) , false);

第一个参数是开始圆的X坐标的位置

第二个参数（Y坐标）和第三个参数（半径）值是一样的；

在画开始圆的时候需要先设置一下rotate，需要和比例圆的开始位置在一个起点上。

   context.rotate(-startArc);

这时我们通过运行代码看不出来有圆弧的效果，原因是开始圆的起点和比例圆的起点重叠在一起了。所以，我们要把比例圆的起点向前调(Math.PI/180*2)弧度

context.rotate(-startArc + Math.PI/180*2);

画结束圆的方式和开始圆一样。注意的是结束圆以它的右边为停止位置。所以画它的Y坐标为-2

context.arc(83, -2, 2, 0, (Math.PI * 2) , false);

第四步：如果比例是100%的话，那么就不需要画开始点和结束点的圆了

所以通过它来判断，如果余数是0 那么比例就是100%，所以就返回retrun;

    if ( curr % total == 0) {return;}

在画开始点和结束点的的坐标时还不够精确，目前我是用这种方式来画的，如果你有更好的方式请给留言.

代码如下：

CSS:

  .item {float:left;width:180px;height:200px;text-align:center;}.item h2 {font-size:16px;}

HTML：

<div class="chart-list"><div class="item fl"><div class="chart"><canvas id="pullCanvas" width="180" height="180" data-total="28545" data-curr="28544"></canvas></div><h2 class="info">28544/28545</h2></div><div class="item  fl"><div class="chart"><canvas id="priceCanvas" width="180" height="180" data-total="34510" data-curr="24010"></canvas></div><h2 class="info">24010/34510</h2></div><div class="item  fl"><div class="chart"><canvas id="getCanvas" width="180" height="180" data-total="545411" data-curr="454011"></canvas></div><h2 class="info">454011/545411</h2></div><div class="item  fl"><div class="chart"><canvas id="clickCanvas" width="180" height="180" data-total="100" data-curr="66"></canvas>
</div><h2 class="info">66/100</h2></div>
</div>

JS:

 (function($, window, undefined) {$.fn.canvasChart = function(options) {var defaults = { };var settings = $.extend({}, defaults, options);var canvas = $(this).get(0);var total =  $(this).attr("data-total");var curr = $(this).attr("data-curr");var constrast = parseFloat(curr/total).toFixed(2); //比例var context = null;if ( !canvas.getContext) {return;}// 定义开始点的大小var startArc = Math.PI/2;// 根据占的比例画圆弧var endArc = (Math.PI * 2) * (constrast);context = canvas.getContext("2d");context.translate(90,90);// 绘制背景圆context.save(); // 保存当前状态 包含 颜色  路径  变形context.beginPath(); // 定义一个子路径开始context.strokeStyle = "#e9e9e9"; //线的颜色context.lineWidth = "2";// 线的大小context.arc(0, 0, 85, 0, Math.PI * 2, true);// 画一个圆context.closePath();// 关闭子路径context.stroke();context.restore();// 还原上一个save保存的状态// 绘制比例圆context.save();context.rotate(-startArc + Math.PI/180*2);context.beginPath();context.strokeStyle = settings.borderColor;context.lineWidth = "4";context.arc(0, 0, 83, 0, (curr % total == 0 ? Math.PI*2 : (endArc-Math.PI/180*3)), false);context.stroke();context.restore();// 判断如果是百分百就不用画开始点和结束点的圆了if ( curr % total == 0) {return;}// 绘制开始时圆点context.save();context.rotate(-startArc);context.beginPath();context.fillStyle = settings.borderColor;context.arc(83, 2, 2, 0, (Math.PI * 2) , false);context.fill();context.restore();// 绘制结束时圆点context.save();context.rotate(endArc-startArc);context.beginPath();context.fillStyle = settings.borderColor;context.arc(83, -2, 2, 0, (Math.PI * 2) , false);context.fill();context.restore();}})($, window);$("#pullCanvas").canvasChart({borderColor: "#3ebfbe"});$("#priceCanvas").canvasChart({borderColor: "#cc6600"});$("#getCanvas").canvasChart({borderColor: "#f9a53e"});$("#clickCanvas").canvasChart({borderColor: "#fa4444"});

用Canvas画占百分比的圆形比例相关推荐

用Canvas画圆环百分比进度条
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-e ...
Canvas 画占比图解决canvas锯齿 bug
案例如图: <section class=" chartWrap"> <div class="chartContent"> <di ...
用Canvas画百分数圆环
项目在github上的地址: https://github.com/Hebin320/ArcChart 用Canvas画自定义View,画一个带进度条的圆形比例图,包含了数字以及文字.百分号,如图所示 ...
php椭圆形制图,canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结
canvas元素在html5中是用于在浏览器中画图的,所以canvas可以实现绘制很多不同的图,那么,今天我们就来看一看canvas如何来绘制一个椭圆形,话不多说,让我们来直接看正文吧. 首先我们来看 ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
Android心电数据分析,Android SurfaceView+Canvas画脉搏/心电数据图-Go语言中文社区
实际演示效果: Canvas 画图基本步骤: 1.布局添加一个SurfaceView<?xml version="1.0" encoding="utf-8" ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
心电图特效代码 html5,用canvas画心电图的示例代码
本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下: 效果图: 思路: ?1.模拟点(如果你有真实的数据,那就是把数据幻化成canvas对应的坐标点) ? 模拟点时注意的点就是高起部分需 ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...

用Canvas画占百分比的圆形比例

用Canvas画占百分比的圆形比例相关推荐

最新文章

热门文章