【Html5每日练习】canvas绘制线性渐变图形

最新推荐文章于 2022-07-16 16:46:33 发布

原创最新推荐文章于 2022-07-16 16:46:33 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #图形 #html

html5 canvas 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas创建动态渐变效果的方法，并通过一个具体示例展示了如何利用JavaScript来绘制一系列带有颜色渐变的圆形图案。

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

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");
	
	var canvasGra = context.createLinearGradient(0,0,0,500);
	canvasGra.addColorStop(0,"rgba(255,0,0,0.5)");
	canvasGra.addColorStop(0.25,"rgba(0,255,0,0.5)");
	canvasGra.addColorStop(0.5,"rgba(0,0,255,0.5)");
	canvasGra.addColorStop(0.75,"rgba(0,255,255,0.5)");
	canvasGra.addColorStop(1,"rgba(255,255,255,0.5)");
	context.fillStyle = canvasGra;
	for(var i=1;i<8;i++)
	{
		context.beginPath();		
		context.arc(i*50,i*50,i*20,0,2*Math.PI,true);
		context.fill();
	}
	
</script>
</html>

效果图如下