H5画布绘制渐变

快乐江小鱼

于 2022-09-02 09:42:25 发布

阅读量431

点赞数

分类专栏： Html 文章标签：前端 Html html5

本文链接：https://blog.csdn.net/dolly_baby/article/details/126656183

版权

Html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

H5画布绘制渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#myCanvas{
				box-shadow: 0 0 5px black;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
	</body>
	<script>
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		//设置填充色，rgba()方法可以指定透明度
		//ctx.fillStyle = "red";
		//ctx.fillStyle = "#003300";
		//ctx.fillStyle = "rgb(255,0,0)";
		//创建线性渐变，指定渐变的起点和终点，设置渐变颜色值
		//createLinearGradient(x0, y0, x1, y1)
		var linear = ctx.createLinearGradient(0, 0, 0, 100);
		linear.addColorStop(0, "red");
		linear.addColorStop(0.5, "blue");
		linear.addColorStop(1, "green");
		ctx.fillStyle = linear;
		//绘制一个100x100的矩形
		ctx.fillRect(0,0,100,100);
		//全局设置透明度		
		ctx.globalAlpha = "0.2";
		ctx.strokeStyle = "red";
		ctx.strokeRect(150,150,100,100);
		//一旦设置了strokeStyle、fillStyle，那么这个属性变为下面所有绘制的默认属性，需要重新更改值
		ctx.strokeStyle = "black";
		ctx.strokeRect(250,250,100,100);
		//创建径向渐变
		//createRadialGradient(x0, y0, r0, x1, y1, r1)
		//(x0, y0)是开始圆的坐标，r0是开始圆的半径, (x1, y1)是结束圆的坐标，r1是结束圆的半径
		ctx.globalAlpha = "1";
		var radial = ctx.createRadialGradient(230, 30, 10, 250, 50, 50);
		radial.addColorStop(0,"red");
		radial.addColorStop(0.5,"blue");
		radial.addColorStop(0.9,"green");
		radial.addColorStop(1,"rgba(0,0,0,0)");
		ctx.fillStyle = radial;
		ctx.fillRect(200, 0, 100, 100);
	</script>
</html>