canvas画圆环(一)之渐变色，纯色

通过canvas画可自定义纯色或渐变色的圆环，可当进度条使用，本文章做了简单的封装可直接使用，也可自定义更改

html结构

<div class="item-canvas"><canvas id="procanvas1" class="procanvas"></canvas>
</di>

需要设置外层的item-canvas的宽高，内层canvas会设置成和外层一样。

javascript

定义函数

function process() {var ring = arguments[0]; //获取传入的第一个参数var canvas = document.getElementById(ring.canvasId);var context = canvas.getContext('2d');var center = [(ring.canvasW) / 2, (ring.canvasH) / 2];var borderWidth = ring.bdWidth;var r = ring.canvasW / 2 - borderWidth / 2; //因内层canvas的宽度和外层相等，所以需要减去圆环的宽度context.clearRect(0, 0, ring.canvasW, ring.canvasH); //清除canvas//开始画一个灰色的圆context.save();context.beginPath();context.lineWidth = borderWidth;context.strokeStyle = ring.bgcolor;context.arc(center[0], center[1], r, 0, 2 * Math.PI, false);context.stroke();context.restore();//设置渐变色,做了简单的判断传入的是渐变色或者纯色if (ring.color) {var gradient = context.createLinearGradient(ring.x1, ring.y1, ring.x2, ring.y2);ring.color.forEach(element => {gradient.addColorStop(element.step, element.color);});context.strokeStyle = gradient;}if (ring.strokeColor) {context.strokeStyle = ring.strokeColor;}/*此处是添加圆环内部的文字*/context.save();context.beginPath();context.font = "20px Georgia";context.textAlign="center"; //基于基线水平居中，垂直目前没好的方法，有请告知context.fillStyle = gradient;context.fillText(ring.percent+"%", center[0] , center[1] ); context.restore();//外层圆环context.save();context.beginPath();context.lineWidth = borderWidth;context.arc(center[0], center[1], r, 0, 2 * ring.percent / 100 * Math.PI, false);context.lineCap = "round";context.stroke();context.restore();
}

简单封装

//测试用渐变色
var arr = [{step: '0',color: '#43e8ff'
}, {step: '0.4',color: '#8024db'
}, {step: '0.6',color: '#a044ff'
}, {step: '0.9',color: '#5205ce'
}, {step: '1',color: '#25c1fb'
}];
var divItem = document.querySelector(".item-canvas");
var canvasW = divItem.offsetWidth; //获取外层div宽高，然后赋值给canvas
var canvasH = divItem.offsetWidth;
process({canvasId: "procanvas1",  //canvas的IdcanvasW: canvasW,        //canvas的widthcanvasH: canvasH,        //canvas的heightbdWidth: 10,          //圆环的宽color: arr,              //渐变需要设置渐变的颜色及占用的百分比需要写小数bgcolor: "gray",         //圆环的背景颜色//strokeColor:"red",       //纯色,没渐变写x1: canvasW / 2,                   //渐变的起始位置和结束位置x1,y1,x2,y2y1: canvasH,x2: canvasW / 2,y2: 0,percent: 100,             //转过的百分比})

效果如下图：

canvas画圆环(一)之渐变色，纯色相关推荐

用Canvas画圆环百分比进度条
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-e ...
canvas画一个渐变色的环形进度环
» 介绍之前用canvas画了一个环形进度条,想要实现从0到100颜色渐变效果,现有的线性渐变和径向渐变都无法满足,找到一种思路,仅供参考,先看效果: 预览地址:https://b3mk0.csb. ...
在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
用Canvas画百分数圆环
项目在github上的地址: https://github.com/Hebin320/ArcChart 用Canvas画自定义View,画一个带进度条的圆形比例图,包含了数字以及文字.百分号,如图所示 ...
Android自定义View之画圆环(手把手教你如何一步步画圆环)
关于自定义View: 好了,吐槽时间到.自定义view是Android开发知识体系中的重点,也是难点.好多小伙伴(也包括我)之前对自定义view也是似懂非懂.那种感觉老难受了.因此作为社会主义好青年, ...
使用canvas绘制圆环进度条
使用canvas绘制圆环进度条技术要求需要一点点数学基础需要对 canvas 的常见的方法熟悉一点点数学基础已知圆心,半径,角度,求圆上的点坐标 canvas 常见的方法菜鸟教程扬帆起航 ...
Android自定义View之画圆环(进阶篇:圆形进度条)
前言: 如果你想读懂或者更好的理解本篇文章关于自定义圆环或圆弧的内容.请你务必提前阅读下Android自定义View之画圆环(手把手教你如何一步步画圆环).在这篇文章中,详细描述了最基本的自定义圆环的 ...
canvas画奥运五环 2019/10/29
在HbuilderX中用canvas画一个奥运五环. 先用arc画出五个圆环,画布是后画的图形在顶层,再根据圆环相互串压的顺序,新添同心圆笔画,就能画出五环相互勾连的样子了. 基本完成任务,效果简陋, ...
用Raphael在网页中画圆环进度条（简化版）
上篇写了用Raphael画圆环进度条(http://boytnt.blog.51cto.com/966121/1074215),这一篇把它简化一下,只画一条比较粗的弧,优点是简单,缺点是不能做渐变色了 ...

canvas画圆环(一)之渐变色，纯色

html结构

javascript

定义函数

简单封装

canvas画圆环(一)之渐变色，纯色相关推荐

最新文章

热门文章