利用<canvas>实现渐变功能。

  • createLinearGradient(x,y,x1,y1); 创建线条渐变,x表示渐变开始的x坐标,y表示渐变开始的y坐标,x1表示渐变结束的x坐标,y1表示渐变结束的y坐标。

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。

使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。

使用createLinearGradient(),创建一个线性渐变。

代码片段:

    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script type="text/javascript">
		//1.获取画布
		var canvas=document.getElementById("canvas");
		//2.创建画布上下文对象
		var context=canvas.getContext("2d");
		//3.beginPath()
		context.beginPath();
		//4.设置样式
		//创建渐变对象
		var linear=context.createLinearGradient(0,50,500,50)
		//添加渐变颜色
		linear.addColorStop(0,"red");
		linear.addColorStop(1,"green");
		//设置矩形的填充颜色
		context.fillStyle=linear;
		//填充渐变
		// context.fillStyle=grd;
		context.fillRect(10,10,600,300);
    </script>

效果图:

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值