使用canvas画同心圆，并且设置颜色渐变

使用canvas进行画圆，并且设置圆环颜色渐变；中间的实心圆渐变。在使用的过程中，其实是发现createLinearGradient(x0,y0,x1,y1)方法时，根据改变x0,y0,x1,y1可以改变圆环颜色饱和度，所以写下这篇文章进行记录。下面是实现的结果图：

下面是具体的代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用canvas画同心渐变圆</title></head><body><canvas id="canvasEle"></canvas></body><script>// 圆环开始的位置的颜色var ringSartColor;// 圆环结束的位置的颜色var ringEndColor;// canvas标签的idvar canvasId;function initCanvas(canvasId,ringSartColor,ringEndColor){var myCanvas = document.getElementById(canvasId);var context = myCanvas.getContext("2d");// 通过修改中间的值可以改变圆中颜色的饱和度:圆环// createLinearGradient(x0,y0,x1,y1)；// 参数分别是渐变开始的x0、y0坐标；渐变结束点的x1、y1坐标// var ring = context.createLinearGradient(0,90,90,0);var ring = context.createLinearGradient(0,60,60,0);ring.addColorStop("0",ringSartColor);ring.addColorStop("1.0",ringEndColor);// 用渐变进行填充颜色context.strokeStyle = ring;// 设置圆环的宽度context.lineWidth = 10;// 绘画圆环context.beginPath();// 使用arc设置context.arc(x,y,r,sAngle,eAngle,counterclockwise);// x:圆的中心的x坐标；y:圆的中心的y坐标；r:圆的半径；// sAngle:起始角，以弧度计（弧的圆形的三点钟位置是 0 度）；// eAngle:结束角，以弧度计；// counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。context.arc(74,74,60,0,Math.PI*2,false);// 设置圆环context.stroke();// 结束 画圆环context.closePath();// 中间的 圆 createRadialGradient(x0,y0,r0,x1,y1,r1)；// 渐变的开始圆的x0、y0、r0坐标半径；渐变的结束圆的x1、y1、z1坐标半径var round = context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"#FFF");round.addColorStop(1,"#4C4C4C");context.fillStyle = round;context.beginPath();// 上面已经描述清楚context.arc(74,74,48,0,2*Math.PI,true);// 实心圆context.fill();};// 画圆环  #1377ff   #b042fe    #C80000   #08e5ab  #00a1f0   这些颜色可以自己尝试initCanvas("canvasEle","#2C2255","#08e5ab");        </script>
</html>

使用canvas画同心圆，并且设置颜色渐变相关推荐

用canvas画一个水滴形状的渐变进度条、控制条
不知道该如何形容这东西,有点像水滴又不是很像,如下图滑动条进度条我是通过canvas 画出来的,如果你有更好的方法,欢迎交流. 代码如下: <!DOCTYPE html> <h ...
python颜色画线_matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用,提供了一种有效的 MatLab 开源替代方案. 它也可以和图形工具包一起使用,如 PyQt 和 wxPython. 今 ...
Unity设置字体颜色渐变
unity开发程序在一些必要的的程序的时候需要实现一些简单的渐变效果,之前不太懂都是直接让美术那边出图片用图片来代替,用着用着就让工程中多了很多没有必要的图片.后面找到了一种很好优化包的方法就是直接用 ...
echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
Android TextView文字颜色渐变
一,第一种效果一段文字的颜色从一种颜色,渐变为另一种颜色关键代码 private void setTextViewStyles(TextView textView) {LinearGradient ...
让两个div在一行显示，并加上颜色渐变边框
前言: 下面实现的效果是让一个大的div里的两个小div同行显示出来,并给它们加上颜色渐变边框,可以用来展示图片旁边配文字的样式. 清除浮动 div是块状元素,通常情况下独占一行,那么就需要使用flo ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
android canvas画渐变背景,View绘制系列(13)-Canvas渐变属性绘制
Canvas渐变属性绘制五颜六色,七彩缤纷.有时候我们的UI设计稿也极尽色彩之能,比如下图这样: 这种渐变效果我们能画吗?不得不说,Android系统的基础构架还是很强大的,我们可以使用Linear ...
Android画个颜色渐变的圆环玩玩
先看下最终的效果开始实现新建一个DoughnutView继承View public class DoughnutView extends View {} 先重写onMeasure方法,为什么要重写 ...

使用canvas画同心圆，并且设置颜色渐变

使用canvas画同心圆，并且设置颜色渐变相关推荐

最新文章

热门文章