canvas创建放射性渐变

最新推荐文章于 2021-06-21 09:26:16 发布

hb707934728

最新推荐文章于 2021-06-21 09:26:16 发布

阅读量649

点赞数

分类专栏： Html5_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/69388924

版权

Html5_学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-->
<html>

	<head>
		<title>放射性渐变</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			#canvas {
				background: #eeeeee;
				border: thin solid cornflowerblue;
			}
		</style>
	</head>

	<body>
		<div display='inline'>
			<canvas id='canvas' width='450' height='275'>
              Canvas not supported
           </canvas>

			<script>
				var canvas = document.getElementById('canvas'),
					context = canvas.getContext('2d'),
					//创建一个放射性渐变 函数原型 createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
					//xStart,yStart开始圆的圆心坐标 radiusStart 开始圆的半径
					//xEnd,yEnd结束圆的圆心坐标  radiusEnd结束圆的半径
					gradient = context.createRadialGradient(
						canvas.width / 2, canvas.height*0.8, 10,
						canvas.width / 2, 0, 100);

				gradient.addColorStop(0, 'blue');
				gradient.addColorStop(0.25, 'white');
				gradient.addColorStop(0.5, 'purple');
				gradient.addColorStop(0.75, 'red');
				gradient.addColorStop(1, 'yellow');

				context.fillStyle = gradient;
				context.rect(0, 0, canvas.width, canvas.height);
				context.fill();
			</script>
		</div>
	</body>

</html>

演示地址：http://sandbox.runjs.cn/show/8vxutkq1

hb707934728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas创建放射性渐变

--> 放射性渐变 #canvas { background: #eeeeee; border: thin solid cornflowerblue; } Canvas not supported var canvas = document.get
复制链接

扫一扫