【Html5】canvas绘制圆形

最新推荐文章于 2024-01-01 16:24:53 发布

原创最新推荐文章于 2024-01-01 16:24:53 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

html5 canvas 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas实现的渐变滤镜效果，通过绘制一系列不同大小及透明度的圆形来达到视觉上的渐变效果。该方法简单易懂，适合初学者学习Canvas的基本用法。

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的

先截个图：

代码如下

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");
	
	context.fillStyle = "#e4e4e4";
	context.fillRect(0,0,500,500);

	context.fillStyle = "rgba(255,0,0,0.2)";
	for(i=1;i<15;i++)
	{
		context.beginPath();				//清除前面的路径，否则颜色会叠加
		context.arc(30*i,30*i,10*i,0,2*Math.PI,true);
		context.fill();
	}
	
</script>
</html>