渐变圆的案例 canvas渐变

原创已于 2022-08-03 10:30:52 修改 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #servlet #前端

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

这篇博客展示了如何使用HTML5 Canvas API创建径向和线性渐变效果。通过`createRadialGradient`和`createLinearGradient`方法定义渐变，并用`addColorStop`设置颜色停靠点，然后应用到填充样式中，创建出从红色到绿色的过渡效果。示例代码包括绘制圆形和矩形的渐变背景。

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