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

最新推荐文章于 2023-10-19 15:51:43 发布

boia

最新推荐文章于 2023-10-19 15:51:43 发布

阅读量1.3k

点赞数

分类专栏： html5 canvas 文章标签： html5 图形 html

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7460114

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<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>

效果图如下