canvas环形进度条
<style>
canvas {
border: 1px solid red;
margin: 100px;
}
</style>
<canvas id="ring-process-bar" width="100" height="100">
您的浏览器不支持html5 canvas标签。
</canvas>
<script>
var ring = document.getElementById('ring-process-bar');
var rtx = ring.getContext('2d');
rtx.beginPath(); //起始一条路径
rtx.lineWidth = 20; //设置当前线条的宽度
rtx.strokeStyle = '#ccc'; //设置笔触的颜色
rtx.lineCap = 'round'; //结束线帽:butt默认平直/round圆形/square正方形
rtx.arc(50, 50, 40, 0, 2 * Math.PI, true); //arc(x,y,r,start,stop,false) 创建弧/曲线/圆;圆中心点的x,y坐标;r半径;start起始角,三点钟位置为0度;false顺时针,默认
rtx.stroke();
</script>
<canvas id="ring-canvas" width="500" height="200">
您的浏览器不支持html5 canvas标签。
</canvas>
<script>
function Circle() {
this.centerX = 100;
this.centerY = 100;
this.radius = 90;
this.lineWidth = 20;
this.strokeStyle = '#ccc';
this.fillStyle = 'blue';
this.lineCap = 'round';
}
Circle.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, false);
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeStyle;
ctx.stroke();
};
function Ring(startAngle, percent) {
Circle.call(this);
this.startAngle = startAngle || Math.PI / 2 * 3; //弧起始角度
this.percent = percent; //弧占的比例
}
Ring.prototype = Object.create(Circle.prototype);
Ring.prototype.drawRing = function(ctx) {
var count = 0,
start = this.startAngle,
stop = start + Math.PI * 2 * this.percent / 100;
this.draw(ctx);
ctx.beginPath();
ctx.arc(this.centerX, this.centerY, this.radius, start, stop, false); //这里的圆心坐标要和cirle的保持一致
ctx.strokeStyle = this.fillStyle;
ctx.lineCap = this.lineCap;
ctx.stroke();
ctx.closePath();
}
var ring = document.getElementById('ring-canvas');
var rtx = ring.getContext('2d');
var r = new Ring(0, 80);
r.drawRing(rtx)
</script>
canvas环形进度条的更多相关文章
- 用初中数学知识撸一个canvas环形进度条
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- canvas绘制环形进度条
<!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...
- html5 canvas绘制环形进度条,环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
- 仿MIUI音量变化环形进度条实现
Android中使用环形进度条的业务场景事实上蛮多的,比方下载文件的时候使用环形进度条.会给用户眼前一亮的感觉:再比方我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧 ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- 自定义环形进度条RoundProgressBar
一.效果图: Canvas画圆环说明: 圆环宽度不必在意,只是画笔宽度设置后达到的效果. 二.实现步骤 1.自定义View-RoundProgressBar 2.设置属性resources(decle ...
随机推荐
- HDU1560 DNA sequence(IDA*)题解
DNA sequence Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- 项目梳理4——WebApi项目,使用注释填充Description字段
web.config中添加连接字符串: 为webapi添加Description,使用注释来填充此字段 对于所有引用的xxxx.base项目设置生成的xml文档,注意release.debug下都需设 ...
- SQL 事务(Transaction)
1.概念 指访问并可能更新数据库中各种数据项的一个程序执行单元(unit)由多个sql语句组成,必须作为一个整体执行这些sql语句作为一个整体一起向系统提交,要么都执行.要么都不执行 语法步骤:开始事 ...
- ZOJ 3329 One Person Game (经典概率dp+有环方程求解)
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3329 题意:现在有三个骰子,分别有k1,k2和k3面,面上的点就是1~ki ...
- hdu 6020 MG loves apple 恶心模拟
题目链接:点击传送 MG loves apple Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 262144/262144 K (Ja ...
- python flask demo
from flask import Flask, jsonify from flask import abort from flask import make_response from flask ...
- ubuntu-server14.04 网络配置
一.启动网卡 ubuntu server 安装后,ifconfig 发现只有一个lo 和一个p1p1 网卡, 先查看服务器网卡:ifconfig -a ,发现有lo ,p1p1,p2p1,p3p1,p ...
- 如何 Graphics 对象设置背景色
用 Clear 方法可以轻松地给 Graphics 对象设置背景色. using (Bitmap bmp = new Bitmap(width, height)){ using (Graphic ...
- 《图解Http》8: 用户身份认证Cookie管理session; 9:HTTP的追加协议(websoket, webDAV)
基本认证,(安全等级低,多数网站不使用) Digest认证:(也不怎么用) SSL客户端认证:(凭借客户端证书认证,如网银登陆) 表单认证:用户名/密码.(常用) SSL客户端认证采用two-fact ...
- android--------面试题收集
Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发.这里会不断收集和更新Android基础相关的面试题 ...