您的位置 首页 css教程

HTML Canvas如何实现径向渐变效果?

可以先使用HTML Canvas的径向渐变的函数createRadialGradient()来创建一个放射状/圆形渐变对象;然后使用addColorStop()方法定义渐变颜色;最后使用fillStyle属性填充渐变颜色,使用fillRect()等方法来绘制“已填色”的形状,如矩形,圆形,线条,文本等。

实现径向渐变效果所要的方法有:

createLinearGradient()方法创建放射状/圆形渐变对象;渐变可用于填充矩形、圆形、线条、文本等等。

JavaScript 语法:

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值:

● x0:定义渐变的开始圆的 x 坐标

● y0:定义渐变的开始圆的 y 坐标

● r0 :定义开始圆的半径

● x1:定义渐变的结束圆的 x 坐标

● y1:定义渐变的结束圆的 y 坐标

● r1:定义结束圆的半径

addColorStop()方法规定渐变对象中的颜色和位置。可以使用addColorStop()方法规定不同的颜色,以及在渐变对象中的何处定位颜色。

fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。

fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。

示例1:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body style="text-align:center;">
		<canvas id="myCanvas" width="350" height="180"></canvas>
		<script>
		    var c = document.getElementById('myCanvas');
		    var ctx = c.getContext('2d');
		    //创建一个径向渐变对象
		    var radgrad = ctx.createRadialGradient(100,100,20,100,100,50);
		    //定义渐变色颜色
		    radgrad.addColorStop(0, 'red');  
		    radgrad.addColorStop(0.3, 'yellow');  
		    radgrad.addColorStop(1, 'blue');
		
		    ctx.fillStyle = radgrad;  //设置用于填充绘画的颜色、渐变或模式
		    ctx.fillRect(50,50,150,150);//绘制渐变图形
		</script>
	</body>
</html>

效果图:

a9c6b6cf81cb315a67809b296239ad8.png

示例2:绘制具有径向渐变的球

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body style="text-align:center;">
		<h2>线性渐变效果</h2>
		<canvas id="myCanvas" width="350" height="180"></canvas>
		<script>
			var canvas= document.getElementById('myCanvas');
		    var ctx = canvas.getContext('2d');
		    function circle(x, y, r, c) {
		        ctx.beginPath();
		        var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
		        rad.addColorStop(0, 'rgba('+c+',1)');
		        rad.addColorStop(1, 'rgba('+c+',0)');
		        ctx.fillStyle = rad;
		        ctx.arc(x, y, r, 0, Math.PI*2, false);
		        ctx.fill();
		    }
		    circle(128, 128, 200, '255,0,0');
		    circle(64, 64, 30,'0,255,0');
		</script>
	</body>
</html>

效果图:

d826a98bb9f449c47e7d1a5b18b45c7.png

示例3:使用渐变色绘制环

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body style="text-align:center;">
		<canvas id="myCanvas" width="350" height="180"></canvas>
		<script>
			var canvas= document.getElementById('myCanvas');
		    var ctx = canvas.getContext('2d');
		    var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60);
		    radgrad.addColorStop(0.8, 'rgba(255,0,0,0)');
		    radgrad.addColorStop(0.85,'rgba(255,0,0,.6)');
		    radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');
		    radgrad.addColorStop(0.95,'rgba(255,0,0,.6)');
		    radgrad.addColorStop(1,   'rgba(255,0,0,0)');
		   
		    ctx.fillStyle = radgrad;
		    ctx.arc(60, 60, 60, 0, 2 * Math.PI, true);
		    ctx.fill();
		</script>
	</body>
</html>

效果图:

b34e81318488d979b933a1d7733a5ca.png

以上就是HTML Canvas如何实现径向渐变效果?的详细内容,更多请关注火云技术网其它相关文章!

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

网站地图