Canvas三种动态画圆实现方法说明
前言
canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。
这里我个人总结了3种实现方法,大家可以参考一下。
方法一:arc()实现画圆
效果:
width="100%" height="381" scrolling="no" title="动态画圆:方法一" src="//codepen.io/lecein/embed/WoMyMo/?height=381&theme-id=0&default-tab=result" allowfullscreen="true">
代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style type="text/css">#myCanvas{margin:0 auto;display:block;}</style>
</head>
<body><canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas><script type="text/javascript">//方法一:arc 动态画圆var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');var mW = c.width = 300;var mH = c.height = 300;var lineWidth = 5;var r = mW / 2; //中间位置var cR = r - 4 * lineWidth; //圆半径var startAngle = -(1 / 2 * Math.PI); //开始角度var endAngle = startAngle + 2 * Math.PI; //结束角度var xAngle = 1 * (Math.PI / 180); //偏移角度量var fontSize = 35; //字号大小var tmpAngle = startAngle; //临时角度变量//渲染函数var rander = function(){if(tmpAngle >= endAngle){return;}else if(tmpAngle + xAngle > endAngle){tmpAngle = endAngle;}else{tmpAngle += xAngle;}ctx.clearRect(0, 0, mW, mH);//画圈ctx.beginPath();ctx.lineWidth = lineWidth;ctx.strokeStyle = '#1c86d1';ctx.arc(r, r, cR, startAngle, tmpAngle);ctx.stroke();ctx.closePath();//写字ctx.fillStyle = '#1d89d5';ctx.font= fontSize + 'px Microsoft Yahei';ctx.textAlign='center';ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);requestAnimationFrame(rander);};rander();</script>
</body>
</html>
思路:
通过设置的开始角度和结束角度来做限定,然后通过累加临时的角度变量实现动画效果。
相关函数:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
方法二:rotate() 动态画圆
效果:
height="371" width="100%" scrolling="no" title="动态画圆:方法二" src="//codepen.io/lecein/embed/dOdKwB/?height=371&theme-id=0&default-tab=result" allowfullscreen="true">
代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style type="text/css">#myCanvas{margin:0 auto;display:block;}</style>
</head>
<body><canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas><script type="text/javascript">//方法二:rotate() 动态画圆var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');var mW = c.width = 300;var mH = c.height = 300;var lineWidth = 5;var r = mW / 2; //中间位置var cR = r - 4 * lineWidth; //圆半径var startAngle = -(1 / 2 * Math.PI); //开始角度var endAngle = startAngle + 2 * Math.PI; //结束角度var xAngle = 1 * (Math.PI / 180); //偏移角度量var fontSize = 35; //字号大小var tmpAngle = startAngle; //临时角度变量//渲染函数var rander = function(){if(tmpAngle >= endAngle){return;}else if(tmpAngle + xAngle > endAngle){tmpAngle = endAngle;}else{tmpAngle += xAngle;}ctx.clearRect(0, 0, mW, mH);//画圈ctx.save();ctx.beginPath();ctx.lineWidth = lineWidth;ctx.strokeStyle = '#1c86d1';ctx.translate(r, r); //重定义圆点ctx.rotate(-Math.PI); //最上方为起点for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图ctx.moveTo(0, cR - lineWidth);ctx.lineTo(0, cR);ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆}ctx.stroke();ctx.closePath();ctx.restore();//写字ctx.fillStyle = '#1d89d5';ctx.font= fontSize + 'px Microsoft Yahei';ctx.textAlign='center';ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);requestAnimationFrame(rander);};rander();</script>
</body>
</html>
思路:
通过重新定义圆点坐标为(0,0),然后通过在规定范围内旋转图形,进行单点绘制。
相关函数:
context.translate(x,y);
context.rotate(angle);
方法三:获取圆坐标方式 动态画圆
效果:
height="369" width="100%" scrolling="no" title="动态画圆:方法三" src="//codepen.io/lecein/embed/RoQBbW/?height=369&theme-id=0&default-tab=result" allowfullscreen="true">
代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style type="text/css">#myCanvas{margin:0 auto;display:block;}</style>
</head>
<body><canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas><script type="text/javascript">//方法三:获取圆坐标方式 动态画圆var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');var mW = c.width = 300;var mH = c.height = 300;var lineWidth = 5;var r = mW / 2; //中间位置var cR = r - 4 * lineWidth; //圆半径var startAngle = -(1 / 2 * Math.PI); //开始角度var endAngle = startAngle + 2 * Math.PI; //结束角度var xAngle = 2 * (Math.PI / 180); //偏移角度量var cArr = []; //圆坐标数组//初始化圆坐标数组for(var i = startAngle; i <= endAngle; i += xAngle){//通过sin()和cos()获取每个角度对应的坐标var x = r + cR * Math.cos(i);var y = r + cR * Math.sin(i);cArr.push([x, y]);}//移动到开始点var startPoint = cArr.shift();ctx.beginPath();ctx.moveTo(startPoint[0], startPoint[1]);//渲染函数var rander = function(){//画圈if(cArr.length){ctx.lineWidth = lineWidth;ctx.strokeStyle = '#1c86d1'; var tmpPoint = cArr.shift();ctx.lineTo(tmpPoint[0], tmpPoint[1]);ctx.stroke(); }else{cArr = null;return;}requestAnimationFrame(rander);};rander();</script>
</body>
</html>
思路:
通过sin()
和 cos()
按一定的角度偏移量,将开始角度和结束角度之间的坐标位置存于数组中,然后按照数组中的坐标点进行绘制。
关于坐标点的计算,设计到了一些数学知识,这里我做了一张说明图:
效果
后记
通过上面的绘画方法,大家可以稍加修改制作成进度条插件。
博客名称:王乐平博客
博客地址:http://blog.lepingde.com
CSDN博客地址:http://blog.csdn.net/lecepin
Canvas三种动态画圆实现方法说明相关推荐
- html根据坐标画圆,Canvas三种动态画圆实现方法说明(小结)
前言 canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果.可以用它来做圆形进度条来使用. 这里我个人总结了3种实现方 ...
- postgresql源码学习(57)—— pg中的四种动态库加载方法
一. 基础知识 1. 什么是库 库其实就是一些通用代码,可以在程序中重复使用,比如一些数学函数,可以不需要自己编写,直接调用相关函数即可实现,避免重复造轮子. 在linux中,支持两种类型的库: 1. ...
- Linux操作系统下三种配置环境变量的方法(linux下几种profile执行顺序)
http://www.linuxeden.com/html/sysadmin/20080424/56879.html 现在使用linux的朋友越来越多了,在linux下做开发首先就是需要配置环境变量, ...
- python list遍历 间隔_Python 列表(List) 的三种遍历(序号和值)方法
#!/usr/bin/env python # -*- coding: utf-8 -*- if __name__ == '__main__': list = ['html', 'js', 'css' ...
- [zz]Linux操作系统下三种配置环境变量的方法
个人的总结: 设置了/etc/profile 和 ~/.bashrc 之后,使用了source 命令,是可以echo添加的变量,但是用getenv读不出来,然后使用env命令也显示不出来,是因为没有e ...
- php冒泡 插入选择 排序,说说PHP数组的三种排序(冒泡/选择/插入)方法
说说PHP数组的三种排序(冒泡/选择/插入)方法 PHP #数组 #排序 #冒泡 #选择 #插入2012-05-30 10:17 一.冒泡排序法 说明:找到最大的数,排列到最后面,然后继续找 例: $ ...
- Linux操作系统下三种配置环境变量的方法
现在使用linux的朋友越来越多了,在linux下做开发首先就是需要配置环境变量,下面以配置java环境变量为例介绍三种配置环境变量的方法. 1.修改/etc/profile文件 如果你的计算机仅仅作 ...
- iis搭建php出现301,IIS服务器PHP下三种实现301重定向的方法
IIS服务器PHP下三种实现301重定向的方法 来源:重庆SEO作者:杨南强 2012-05-07 08:47 我来投稿参与评论 301重定向:301代表永久性转移,301重定向是网页更改地址后对搜索 ...
- win7系统wifi没有网络连接到服务器,Win7无线Wifi无法连接怎么办?win7系统Wifi无法连接的三种故障原因及解决方法...
当我们准备接入一个Wifi的时候,发现怎么样都连不进去,该怎么办呢?一般出现该问题基本是由于"WiFi密码不正确" ."Win7中保存的WiFi记录与路由器中不符&quo ...
最新文章
- O-GAN:简单修改,让GAN的判别器变成一个编码器!
- java 好处_Java的优点
- Java注解(1)-注解基础
- Shell 脚本知识回顾 (二) —— Shell变量
- Ubuntu 查看默认软件安装位置
- 关于DateTime的一点记录 ToString(yyyy-MM-dd HH:mm:ss)
- 网络编程之OSI七层协议略析
- 笔记本html连接电视机黑屏是怎么回事,电脑连接电视黑屏是怎么回事
- Python 爬虫---(6) beautifulSoup 库的使用
- Dw cs6的详细下载安装教程对网页设计需要cs6的同学
- wifi mouse hd for linux,wifi mouse hd客户端PC版下载_wifi mouse hd客户端PC版官方下载-太平洋下载中心...
- U盘启动 WinPE系统维护工具 任意安装GHO/WIM/ESD系统映像 无广告专业版
- http://和www.前缀网站有什么区别
- Task08|文本数据|joyfulpandas
- 微信小程序 MinUI 组件库系列之 avatar 头像组件
- locust安装成功为什么运行脚本后打不开页面或运行脚本会报错
- 一览印度区块链项目Matic Network的应用场景
- 有一个超毒舌的对象是什么体验?
- 年度团队个人回顾工坊实录
- Python绘制六角星、多角星、小太阳、小风车《打包好的各种游戏源码,画图源码》