canvas学习之渐变---createLinearGradient

在canvas画出的矩形, 圆形, 线条, 文本等的各种形状中,可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果,实现效果如下图所示
这里写图片描述
createLinearGradient(x,y,x1,y1) - 创建线条渐变
addColorStop(index,color)方法指定颜色停止,参数使用index来描述,index范围在0-1之间,0.5即给定横纵坐标的50%,color给定当前渐变点index出的颜色。其中,当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
使用渐变,设置fillStyle或strokeStyle的值为渐变。

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
</canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,'yellow');
grd.addColorStop(0.5,'red');
grd.addColorStop(1,'blue');
ctx.fillStyle=grd;
ctx.fillRect(10,10,200,200);
</script>

以上代码实现效果为下:
这里写图片描述
代码解释:
var grd=ctx.createLinearGradient(0,0,200,0);
创建渐变轴,createLinearGradient(x,y,x1,y1),x,y指定渐变起点,本例中x=0,y=0以坐标轴(0,0)点开始作为渐变起点,x1,y1指定渐变终点(200,0),createLinearGradient,定义线性渐变,以起点到终点连线,作为渐变轴,本里是以(0,0)–>(200,0)即横向渐变。
grd.addColorStop(0,’yellow’);
grd.addColorStop(0.5,’red’);
grd.addColorStop(1,’blue’);
添加渐变停止点,grd.addColorStop(index,color),index范围0-1,本里中在index=0设置颜色黄色,index=0.5设置颜色为红色,index=1设置颜色为蓝色,即以(0,0)–>(200,0)连线所称的横向为轴,0–>50%范围区域从黄色渐变到红色,在50%–>100%区域从红色渐变到蓝色

再举一个例子,本例子中将实现颜色纵向渐变

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var grd=ctx.createLinearGradient(0,0,0,200);
//从(0,0)-->(0,200)连线为轴(此时为纵向),从上向下开始渐变
grd.addColorStop(0,'yellow');
grd.addColorStop(0.5,'red');
grd.addColorStop(1,'blue');

代码效果如下
这里写图片描述

再举一个例子,多种颜色渐变

var grd=ctx.createLinearGradient(0,0,0,200);
grd.addColorStop(0,'yellow');
grd.addColorStop(0.2,'red');
grd.addColorStop(0.4,'pink');
grd.addColorStop(0.6,'green');
grd.addColorStop(0.8,'orange');
grd.addColorStop(1,'blue');

最终效果
这里写图片描述
渐变的另一种效果createRadialGradient(梯度渐变)放在下篇博文介绍。

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

余额充值