canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
类别:Web前端 浏览量:373
时间:2021-10-02 01:52:06 canvas绘图画圆基本步骤
利用 Canvas实现绘画一个未闭合的带进度条的圆环最终效果图
一、定义变量
定义半径,定义圆环厚度,定义圆心位置、定义默认填充颜色
let radius = 75 let thickness= 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#f2d7d7";
二、画第一个圆弧
ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
注意 beginPath() 这个方法,生成路径的第一步。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、弧形、等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。
也就是说,这个方法可以用来给 Canvas图像 分组,绘制新的图形如果不调用此方法,那么新的图形会和前面的图形连接在一起
三、画第一个连接处
ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)
连接外是用二次贝塞尔曲线来画的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方法接受4个参数,第一、二个参数为控制点,第三、四个参数为结束点官方文档
只需算出控制点和结束点,就可以画出一个圆弧
四、画第二个圆弧
ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
注意方法后面最后一个参数,设置为true,代表逆时针绘制(默认是顺时针)
五、画第二个连接处
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
这一步其实和第三步相差不大,简单的调换了下参数位置
六、填充
ctx.fill();
至此,一个简单的未闭合的圆环就完成了
画第二个进度条圆环
七、初始化
ctx.beginPath(); ctx.fillStyle = "#e87c7c";
beginPath 表示绘制新的图形,如果不调用此方法,那后面画的图形会和前面画的图形连在一起
八、绘制第二个进度条圆环
ctx.beginPath(); ctx.fillStyle = "#e87c7c"; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill();
由于和第一个圆环绘制方式一模一样,就不在重复了,区别仅仅是圆的弧度
九、旋转 Canvas
transform: rotate(-135deg);
由于css的旋转比较方便,也省去了角度的计算,所以本人使用的是css的transform来旋转的。当然 Canvas 也提供了旋转的方法
完整代码
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> <style> .ring { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; } #tutorial { transform: rotate(-135deg); width: 150px; height: 150px; } .fraction { position: absolute; font-size: 30px; font-weight: bold; color: red; } .small { font-size: 12px; font-weight: lighter; } .title { color: red; bottom: 0; position: absolute; } </style> </head> <body> <li class="ring"> <canvas id="tutorial" width="150" height="150"></canvas> <span class="fraction">100 <span class="small">分</span> </span> <span class="title">服务分</span> </li> <script> let radius = 75 let thickness = 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#f2d7d7"; ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#e87c7c"; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill(); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas如何保存当前的图片(canvas如何实现多张图片编辑的图片编辑器)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- 使用canvas画个正方形(canvas小画板之平滑曲线的实现)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- canvas技术开发(用canvas显示验证码的实现)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- canvas 动画线段(canvas简单连线动画的实现代码)
- htmlcanvas的使用(html2canvas生成清晰的图片实现打印的示例代码)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- 白蓝色穿搭(白蓝色衣服配什么裤子)
- 天空是什么颜色(天空是什么颜色的英语)
- 高马尾扎发(高马尾扎发教程视频)
- 这里输入关键词(请手动输入关键词)
- 小说 顾瑾岚拿出一套飞行棋,别说你连飞行棋都不会哦(顾瑾岚拿出一套飞行棋)
- 金品公司 界界乐中秋限定飞行棋礼盒 露营藤篮礼盒全新上市(界界乐中秋限定飞行棋礼盒)
热门推荐
- dedecms列表分页无法显示(dedecms 5.6 分页样式代码修改方法)
- python中输入背景颜色的代码(Python 给屏幕打印信息加上颜色的实现方法)
- JavaScript生成GUID的方法
- laravel前后端分离实现排序(laravel自定义分页的实现案例offset和limit)
- ExtJs中怎么上传文件
- 腾讯云服务器操作系统怎么选(如何选择腾讯云服务器配置?)
- linux服务器安装宝塔(linux宝塔面板安装Zabbix监控服务器资源使用状态)
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- 如何用python在微信里自动回复(Python实现微信自动好友验证,自动回复,发送群聊链接方法)
- 用python制作一个简单的小程序(Python简单基础小程序的实例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9