径向渐变的属性和值

径向渐变:(一定要加浏览器前缀)
从一个点到四周的渐变

			background:-webkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);
			渐变位置: 默认从中心到四周
				left	从左边到四周的渐变
				right
				top
				bottom
				
				left top	从左上角到四周的渐变
				left bottom	
				right top
				...
				
				10px 30px	距离左边10px 距离上边30px
				
			形状:
				默认椭圆	ellipse
				正圆		circle
				注意: 元素是正方形,则都是正圆
				
			大小:
			size:渐变的大小,即渐变到哪里停止,它有四个值。 
				closest-side:最近边; 
				farthest-side:最远边; 
				closest-corner:最近角; 
				farthest-corner:最远角。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML5 中,可以使用 Canvas API 绘制径向渐变。Canvas API 提供了 createRadialGradient() 方法来创建径向渐变对象。 createRadialGradient() 方法的语法如下: ``` context.createRadialGradient(x0, y0, r0, x1, y1, r1); ``` 其中,(x0, y0) 表示渐变的起始点,r0 表示起始点的半径,(x1, y1) 表示渐变的结束点,r1 表示结束点的半径。 接下来,可以使用 addColorStop() 方法来为渐变对象添加颜色。addColorStop() 方法的语法如下: ``` gradient.addColorStop(stop, color); ``` 其中,stop 参数表示颜色的位置,范围在 0.0(起始位置)和 1.0(结束位置)之间,color 参数表示颜色。 下面是一个绘制径向渐变的例子: ```html <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 创建径向渐变对象 var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); // 添加颜色 gradient.addColorStop(0, "red"); gradient.addColorStop(1, "white"); // 绘制圆形 ctx.beginPath(); ctx.arc(100, 100, 100, 0, 2 * Math.PI); ctx.fillStyle = gradient; ctx.fill(); </script> ``` 这个例子中,先创建了一个半径为 50 到 100 的径向渐变对象,起始点和结束点都在圆心位置。然后,使用 addColorStop() 方法为渐变对象添加了两个颜色。最后,使用 fillStyle 属性渐变对象设置为圆形的填充样式,绘制了一个填充有径向渐变的圆形。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值