Canvas 圆形渐变

最新推荐文章于 2022-11-19 22:06:42 发布
最新推荐文章于 2022-11-19 22:06:42 发布
阅读量314 收藏
点赞数
分类专栏： HTML5 文章标签： Canvas 圆形渐变
一 介绍
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下是设置Canvas圆形渐变的方法：
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
 
二 代码 
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 圆形渐变 </title>
</head>
<body>
<h2> 圆形渐变 </h2>
<canvas id="mc" width="400" height="280"
	style="border:1px solid black"></canvas>
<script type="text/javascript">
	// 获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	// 获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	ctx.save();
	ctx.translate(30 , 20);
	// 创建圆形渐变
	lg = ctx.createRadialGradient(80, 40 , 5 , 80 , 40 , 60);
	// 向圆形渐变上添加颜色
	lg.addColorStop(0.2 , "#f00");
	lg.addColorStop(0.5 , "#0f0");
	lg.addColorStop(0.9 , "#00f");
	// 设置使用圆形渐变作为填充颜色
	ctx.fillStyle = lg;
	// 填充一个矩形
	ctx.fillRect(0 , 0 , 160 , 80);
	// 恢复坐标系统
	ctx.restore();
	// 平移坐标系统
	ctx.translate(280 , 160)
	ctx.beginPath();
	// 添加圆弧
	ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
	ctx.closePath();
	ctx.lineWidth = 12;
	// 再次创建圆形渐变
	lg2 = ctx.createRadialGradient(0, 0 , 5 , 0 , 0 , 80);
	// 向圆形渐变上添加颜色
	lg2.addColorStop(0.1 , "#ff0");
	lg2.addColorStop(0.4 , "#0ff");
	lg2.addColorStop(0.8 , "#f0f");
	// 设置使用圆形渐变作为填充颜色
	ctx.fillStyle = lg2;
	ctx.fill();
</script>
</body>
</html>
 
三 运行结果

 
iteye_5722
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas渐变圆动画
hb707934728的博客
04-18 1611
body { background: #dddddd; } #canvas { background: #ffffff; cursor: pointer; margin-left: 10px; margin-top: 10px;
canvas实现渐变的圆
最新发布
qq_45290368的博客
12-06 636
绘制多个圆，颜色依次呈现渐变
用Canvas画带动画的渐变数字圆环
小小码农
04-13 8538
先放效果图这是一个自定义view，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来； 渐变圆以及外圈圆、外圈小圆是自定义view，其他三个文字是Textview；github的地址： https://github.com/Hebin320/ArcChart布局代码： <LinearLayout android:id="@
使用canvas画同心圆，并且设置颜色渐变
蓝_蓝的博客
09-13 8858
使用canvas画同心圆，并且设置颜色渐变。
circle-progress-demo:canvas圆形渐变进度条
05-02
Usagegit clone git@github.com:likej2ee/circle-progress-demo.gitcd circle-progress-demonpm inpm start// 在浏览器中输入 http://loaclhost:8080Tip参考插件去除 jquery 依赖
微信小程序基于canvas渐变实现的彩虹效果示例
10-17
本文将详细讲解如何使用微信小程序中的canvas元素结合线性渐变和圆形渐变技术，来实现炫酷的彩虹效果。 首先，Canvas API 提供了 `createLinearGradient()` 和 `createCircularGradient()` 两个方法来创建渐变。`...
Canvas圆形进度条Loading代码
04-02
本话题主要围绕"Canvas圆形进度条Loading代码"这一主题展开，我们将深入探讨如何利用Canvas来实现一个美观且实用的圆形进度加载动画。 首先，我们要了解Canvas的基本结构。Canvas是一个矩形区域，在这个区域内，...
Android 圆形颜色渐变进度条 自定义控件
01-23
接下来，我们需要重写`onDraw()`方法来绘制我们的圆形渐变进度条。在`onDraw()`中，我们使用`Canvas`对象进行绘制。首先，我们需要计算圆的半径，然后创建一个`Paint`对象用于设置渐变颜色。可以使用`Shader`的`...
android实现圆形渐变进度条
08-19
在onDraw方法中，使用Canvas和Paint类来绘制圆形渐变进度条。圆形渐变进度条的绘制可以分为三个步骤：绘制背景圆环、绘制进度圆环和绘制文本。 在绘制背景圆环时，使用Paint类的setStyle方法设置画笔的样式，并使用...
学习Canvas基础-添加颜色、线性渐变和径向渐变
qq_67983277的博客
11-19 1827
学习Canvas基础-添加颜色、线性渐变和径向渐变
canvas绘制简单的圆形渐变
weixin_30596343的博客
07-31 193
canvas画布可以见单的绘制一些图形，同时也可以制作一些较为炫酷的效果哦！以下是简单的代码： <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>眩晕圆</title></head><body> <!-- 添加can...
HTML5 canvas图形绘制基础(矩形，线条，渐变色，圆形，图片，多边形)
sinat_36917995的博客
12-20 1559
div{     margin-left: 50;     position: relative;     float: left;     }                         1. 绘制矩形                 2. 绘制线条                 3. 绘制圆形            
html5中 让canvas所画的圆环具有 颜色渐变的效果
热门推荐
Tanky-黄的专栏
12-21 1万+
前几天遇到个问题，如何实现html5 canvas中圆环的颜色渐变？而此类例子，在百度上几乎没有这问题的实现，在此，跟大家分享下我的思路！ 刚入手htnl5 ，知识点掌握不深，大家勿喷！贵在交流！ 思路： 在解决上述问题的前提是，你能画出个圆环，最简单的是画两个半级不同的同心圆叠加在一起就可以了。但是为了实现圆环的颜色渐变，如果使用同心圆来实现圆环，不管是哟个线性渐变还是径向渐变都无法实现圆
canvas基础理解 一起来画矩形弧形渐变等
77今天也学习了的博客
04-03 457
canvas ：可以理解为一个div，作用是一块画板 如果想要使用canvas，需要创建一个“画家”。生成画家的方法： var huaban = document.querySelector('.canvas');//画板 var bicaso = huaban.getContext('2d');//画家 canvas上下文对象 //绘画操作 //表示在距离画板左上10px 10px的位...
Canvas画图-一个比想象中更骚气的圆(渐变圆环)
weixin_34148508的博客
07-10 1351
之前介绍了Canvas画图基础，这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛，和圆环结合做进度条非常酷，今天我们就来画一个这样的圆环： Canvas渐变 在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strokeStyle方法，这里是圆环，所以主要讲strokeStyle方法，fillStyle方法也同样适用。 看一下上面那...
html5 canvas实例 绘制变形图形 径向渐变
俊刚的博客
12-01 1960
浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。 注释：Internet Explorer 8 以及更早的版本不支持 元素。 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐
用H5 canvas实现唯美渐变色块的绘制
綦枫Maple的博客
12-21 4005
随着Web前端的不断发展，我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果。一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能。今天我们来讲述一下简单H5 canvas 渐变色块的绘制，希望给有需要的读者一定的启发，day day up together。
canvas圆形设置渐变色
07-13
要在Canvas上绘制一个圆形并应用渐变色，可以按照以下步骤进行操作： 1. 获取Canvas的上下文：首先，获取Canvas元素的上下文。可以使用2D上下文（`getContext('2d')`）来进行2D绘图操作。例如： ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ``` 2. 创建渐变对象：使用Canvas上下文提供的方法创建一个渐变对象。可以使用`createRadialGradient`或`createLinearGradient`方法来创建渐变对象，具体取决于你想要使用的渐变类型。例如，以下代码创建一个径向渐变对象： ```javascript const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius); ``` 3. 添加渐变色停止点：通过使用渐变对象的`addColorStop`方法，可以指定渐变的颜色和位置。例如，以下代码将添加两个颜色停止点，实现从红色到蓝色的渐变： ```javascript gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); ``` 4. 绘制圆形并应用渐变色：使用Canvas上下文提供的方法来绘制圆形，并将渐变对象应用于填充颜色。例如，以下代码将在Canvas上绘制一个圆形，并应用上述创建的渐变对象作为填充颜色： ```javascript ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = gradient; ctx.fill(); ctx.closePath(); ``` 通过以上步骤，就可以在Canvas上成功绘制一个圆形，并应用渐变色作为填充颜色。根据实际需求，可以设置不同的渐变类型、颜色和位置来实现不同的渐变效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值