渐变圆的案例 canvas渐变

大坤...

已于 2022-08-03 10:30:52 修改

阅读量175

点赞数

文章标签： java servlet 前端

于 2022-08-03 10:27:56 首次发布

本文链接：https://blog.csdn.net/red_HTML/article/details/125822472

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="1000"></canvas>
		<script type="text/javascript">
			/** @type {HTMLCanvasElement} */
			var canvas = document.getElementById("canvas")
			var context = canvas.getContext("2d")
			// 开始
			context.beginPath()
			//
			var linear = context.createRadialGradient(200,200,30,200,200,100) // 原点 x y 宽 高
			linear.addColorStop(0.7,"red")
			linear.addColorStop(0.5,"green")
			linear.addColorStop(0.3,"red")
			linear.addColorStop(0.2,"green")
			context.fillStyle=linear
			// context.fillRect(0,0,500,300)
			context.arc(200,200,100,0,2*Math.PI)
			context.fill();
		</script>
	</body>
</html>

canvas渐变

/** @type {HTMLCanvasElement} */

这行代码可以在canvas 写代码中可以出现提示

var linear = context.createLinearGradient(20,200,100,200) // 原点 x y 宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="1000"></canvas>
		<script type="text/javascript">
			/** @type {HTMLCanvasElement} */
			var canvas = document.getElementById("canvas")
			var context = canvas.getContext("2d")
			// 开始
			context.beginPath()
			//
			var linear = context.createLinearGradient(1,200,100,200) // 原点 x y 宽 高
			linear.addColorStop(0.8,"red")
			linear.addColorStop(0.5,"green")
			linear.addColorStop(0.3,"red")
			context.fillStyle=linear
			context.fillRect(0,0,400,400)
		</script>
	</body>
</html>