html5 canvas学习--设置图形的透明度

最新推荐文章于 2025-05-11 15:35:53 发布

转载最新推荐文章于 2025-05-11 15:35:53 发布 · 6.2k 阅读

Html5 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas和JavaScript实现的动态渐变圆形绘制方法。通过transform和rotate函数实现了图形的缩放与旋转效果，并利用循环迭代绘制了多个透明度渐变的同心圆，最终形成了一个动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			// 获取context对象
			var ctx = document.getElementById("myCanvas").getContext("2d");
			// 调整坐标的位置
			ctx.translate(200,20);
			// 循环遍历
			for(var i = 1;i<50;i++){
				// 保存状态
				ctx.save();
				// 矩阵转化
				ctx.transform(0.95,0,0,0.95,30,30);
				// 旋转
				ctx.rotate(Math.PI/12);
				// 开始路径
				ctx.beginPath();
				// 填充的样式
				ctx.fillStyle = 'rgba(255,0,0,'+(1-(i+10)/40)+')';
				// 画圆
				ctx.arc(0,0,50,0,Math.PI*2,true);
				// 闭合路径
				ctx.closePath();
				// 填充
				ctx.fill();
			}
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>