`
cakin24
  • 浏览: 1386046 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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>
 
三 运行结果

 
  • 大小: 15.6 KB
1
0
分享到:
评论

相关推荐

    circle-progress-demo:canvas圆形渐变进度条

    Usagegit clone git@github.com:likej2ee/circle-progress-demo.gitcd circle-progress-demonpm inpm start// 在浏览器中输入 http://loaclhost:8080Tip参考插件去除 jquery 依赖

    html5 canvas圆形转盘抽奖特效.zip

    在这个"html5 canvas圆形转盘抽奖特效.zip"压缩包中,包含了一个利用Canvas实现的圆形转盘抽奖的示例。这个特效可以用于各种在线活动,如促销、游戏或竞赛,为用户带来互动体验。 首先,我们要理解Canvas的基本概念...

    Android 圆形颜色渐变进度条 自定义控件

    接下来,我们需要重写`onDraw()`方法来绘制我们的圆形渐变进度条。在`onDraw()`中,我们使用`Canvas`对象进行绘制。首先,我们需要计算圆的半径,然后创建一个`Paint`对象用于设置渐变颜色。可以使用`Shader`的`...

    HTML5 canvas实现渐变色圆形进度条特效源码.zip

    在这个“HTML5 canvas实现渐变色圆形进度条特效源码”中,我们可以深入理解如何利用canvas API来构建一个具有渐变色彩的圆形进度条。 首先,我们要了解canvas的基本结构。在HTML中,我们创建一个`&lt;canvas&gt;`元素,并...

    html5使用canvas实现的圆形渐变进度条加载动画特效源码.zip

    在这个"html5使用canvas实现的圆形渐变进度条加载动画特效源码.zip"中,我们主要会探讨如何利用Canvas来创建一个圆形渐变的进度条加载动画。 首先,Canvas是一个基于矢量图形的画布,通过JavaScript API可以进行...

    HTML5 canvas带渐变色的圆形进度条动画

    jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件。该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非常的酷。

    HTML5 Canvas渐变色圆形动画特效.rar

    在这个“HTML5 Canvas渐变色圆形动画特效”中,我们主要会探讨以下几个关键知识点: 1. HTML5 Canvas API: Canvas是HTML5的一个核心特性,通过JavaScript来操作Canvas元素,我们可以实现各种图形的绘制,包括线条、...

    QML--Canvas画布实现矩形圆形等圈定

    此外,QML的Canvas还支持路径、曲线、渐变色、图像处理等功能,可以用来创建复杂的图形和动画。通过学习和熟练掌握这些API,开发者可以打造出极具创意的QML应用程序。 在`draw-canvas`这个文件夹中,可能包含了示例...

    渐变色背景和圆形渐变色按钮源码

    本教程将探讨如何使用`soui`库来实现渐变色背景以及圆形渐变色按钮的源码实现,帮助开发者提升应用程序的视觉效果。 `soui`是一个跨平台的界面库,它提供了一套丰富的控件和布局管理机制,使得开发者可以轻松创建出...

    微信小程序基于canvas渐变实现的彩虹效果示例

    本文将详细讲解如何使用微信小程序中的canvas元素结合线性渐变和圆形渐变技术,来实现炫酷的彩虹效果。 首先,Canvas API 提供了 `createLinearGradient()` 和 `createCircularGradient()` 两个方法来创建渐变。`...

    基于HTML5 canvas圆形倒计时器jQuery插件

    例如,可以使用canvas的`createLinearGradient()`或`createRadialGradient()`创建渐变,将圆弧填充为渐变色。同时,可以使用`fillText()`在画布上添加文字,显示倒计时的具体小时、分钟和秒数。 总结来说,基于...

    canvas 圆形进度条效果.zip

    例如,可能使用了CSS3的过渡(transition)或动画(animation)来配合Canvas动画,或者用CSS3来美化进度条的外观,如边框阴影、圆角、渐变等。 6. **index.html**: 压缩包中的“index.html”文件是网页的入口文件...

    HTML5 Canvas圆形灯笼时钟动画特效.zip

    这款"HTML5 Canvas圆形灯笼时钟动画特效"就是利用Canvas API实现的一个独特设计,将时钟的界面设计成具有传统中国特色的红色灯笼样式,为网页添加了一种别样的互动体验。 首先,我们来看Canvas的基本概念。Canvas是...

    html5 canvas绘制的圆形气泡渐变背景动画特效源码.zip

    这个"html5 canvas绘制的圆形气泡渐变背景动画特效源码.zip"文件显然包含了利用HTML5 Canvas实现的一种动态、美观的背景效果。接下来,我们将深入探讨HTML5 Canvas以及如何使用它来创建类似气泡渐变背景动画。 ...

    渐变色圆形流量球

    1. HTML5 Canvas:这是一个强大的绘图工具,允许开发者通过JavaScript在网页上进行像素级别的图形绘制,包括创建圆形和渐变色。 2. SVG(Scalable Vector Graphics):另一种选择,SVG是矢量图形格式,支持圆形和...

    html5 canvas圆形进度条动画特效.zip

    在这个“html5 canvas圆形进度条动画特效”中,我们将探讨如何利用HTML5 Canvas API创建一个动态的、具有吸引力的圆形进度条,并结合CSS、JavaScript以及可能的jQuery库来实现这一特效。 首先,我们需要理解Canvas...

    网页模板——Vue.js圆形CSS3颜色渐变色拾取器.zip

    在这个“网页模板——Vue.js圆形CSS3颜色渐变色拾取器”项目中,我们可以深入探讨Vue.js如何与CSS3技术结合,创建一个动态的颜色选择工具。 首先,Vue.js的核心在于其响应式数据绑定系统。通过使用`v-model`指令,...

    HTML5 Canvas圆形旋转加载动画特效

    在这个特定的案例中,“HTML5 Canvas圆形旋转加载动画特效”是一种利用Canvas API来创建视觉吸引人的加载指示器的方法。这种加载动画通常在网页内容正在加载或者用户等待某些操作完成时显示,以提升用户体验,展示...

Global site tag (gtag.js) - Google Analytics