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

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在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、付费专栏及课程。

余额充值