html中绘制径向渐变

最新推荐文章于 2021-06-24 14:56:29 发布

傲世阿龍

最新推荐文章于 2021-06-24 14:56:29 发布

阅读量867

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u010383937/article/details/72777948

版权

HTML 专栏收录该内容

115 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>渐变绘制</title>
<script>
function draw(id){
	var context=document.getElementById('canvas').getContext('2d');
	var radgrad=context.createRadialGradient(45,45,10,52,50,30);
	radgrad.addColorStop(0,'#a7d30c');
	radgrad.addColorStop(0.9,'#019f62');
	radgrad.addColorStop(1,'rgba(1,159,98,0)');

	var radgrad2=context.createRadialGradient(105,105,20,112,120,50);
	radgrad2.addColorStop(0,'#ff5f98');
	radgrad2.addColorStop(0.75,'#ff0188');
	radgrad2.addColorStop(1,'rgba(255,1,136,0)');

	var radgrad3=context.createRadialGradient(95,15,15,102,20,40);
	radgrad3.addColorStop(0,'#00c9ff');
	radgrad3.addColorStop(0.8,'#00b5e2');
	radgrad3.addColorStop(1,'rgba(0,201,255,0');

	var radgrad4=context.createRadialGradient(0,150,50,0,140,90);
	radgrad4.addColorStop(0,'#f4f201');
	radgrad4.addColorStop(0.8,'#e4c700');
	radgrad4.addColorStop(1,'rgba(228,199,0,0');

	context.fillStyle=radgrad4;
	context.fillRect(0,0,150,150);
	context.fillStyle=radgrad43
	context.fillRect(0,0,150,150);
	context.fillStyle=radgrad2;
	context.fillRect(0,0,150,150);
	context.fillStyle=radgrad;
	context.fillRect(0,0,150,150);
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>

</body>
</html>

傲世阿龍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中绘制径向渐变

渐变绘制function draw(id){ var context=document.getElementById('canvas').getContext('2d'); var radgrad=context.createRadialGradient(45,45,10,52,50,30); radgrad.addColorStop(0,'#a7d30c'); radgr
复制链接

扫一扫

专栏目录